Bladeren bron

注册页面图片验证码功能

dev01 3 jaren geleden
bovenliggende
commit
efcb8febce
4 gewijzigde bestanden met toevoegingen van 147 en 108 verwijderingen
  1. 1 1
      package.json
  2. 17 2
      src/css/register.css
  3. 123 103
      src/js/register.js
  4. 6 2
      template/register.html

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "aft-portal",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "description": "",
   "main": "index.js",
   "scripts": {

+ 17 - 2
src/css/register.css

@@ -26,7 +26,7 @@ a:focus,a,a:hover {
 .title{width:100%;height:50px;font-size: 2rem;color:#5C5C5D;
 line-height:50px;padding-left:50px;}
 .shadow{width:775px;height:25px;margin:0 auto;margin-top:-3px;}
-.regist{width:450px;height: 488px;;padding:0 35px;box-sizing: border-box;margin-right: 50px;
+.regist{width:450px;height: 100%;padding:0 35px;box-sizing: border-box;margin-right: 50px;
     position: absolute;top:0px;right:0;background: #fff; box-shadow: 0 0 10px rgb(90, 90, 90);}
 .zhuce_input{width:95%;height:50px;position: relative;
 margin-bottom:10px;line-height:50px;background: #eeeeee}
@@ -34,6 +34,8 @@ margin-bottom:10px;line-height:50px;background: #eeeeee}
     outline: none;}
 .zhuce_input>input{border:none;width: 200px;}
 .zhuce_input>img{width:40px;height:30px;}
+
+
 .log_del{margin-left:15px;}
 .yanzheng{width:255px;height:40px;position: relative;margin-bottom:10px;}
 .yanzhengma{width:165px;height:40px;border:1px solid #E5E5E5;
@@ -47,7 +49,20 @@ margin-bottom:10px;line-height:50px;background: #eeeeee}
     line-height: 38px;display:inline-block;margin-right:10px;}
 input{padding-left:10px;}
 .cellcode>a{color:#F18101;}
-#photo{position: absolute;right:30px;top:0;width: 100px;;color:#ccc;display: inline-block;padding-left: 0;background: none;text-align: center;border:none}
+#photo {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    width: 120px;
+    color: #ccc;
+    display: inline-block;
+    padding-left: 0;
+    background: none;
+    text-align: center;
+    border: none;
+    height: 80%;
+    margin: 5px 0 0 0;
+}
 #photo_num{position: absolute;left: 60px;top:0;width:170px;display: inline-block;color:#383838;height: 50px;line-height: 50px;border: none}
 .leibie{width:120px;height:30px;display:inline-block;color:#F18101;font-size: 1.4rem;
     line-height: 28px;font-weight: bold;padding-left: 20px;position: relative;}

+ 123 - 103
src/js/register.js

@@ -14,7 +14,7 @@ $(function () {
     $('.login').hide();
     //点击账号后面那个×,清空账号
     $(".log_del").click(function () {
-        $("#username").focus().val("").css('color','#666');
+        $("#username").focus().val("").css('color', '#666');
     });
     var xieyi = $('#protocol').prop("checked", false);
     $('.sub').attr('disabled', true)
@@ -43,28 +43,29 @@ $(function () {
     })
 
     //手机号码
-    let oldPhoto='';
-    var phopoVal=[];
+    let oldPhoto = '';
+    var phopoVal = [];
     $('#photo').attr('disabled', true);
+
     function photo1() {
         var pho_pattern = /^1[2|3|4|5|6|7|8|9][0-9]{9}$/;
         $("#usePhoto").keyup(function () {
             oldPhoto = $(this).val();
             if (pho_pattern.test(oldPhoto)) {
-                tipFun.call(this,false,'')
+                tipFun.call(this, false, '')
                 $('#photo').attr('disabled', false);
                 $("#photo").css("color", "#F18101");
-            } else  {
-                tipFun.call(this,true,'请填写正确的手机号码')
+            } else {
+                tipFun.call(this, true, '请填写正确的手机号码')
                 $('#photo').attr('disabled', true);
                 $("#photo").css("color", "#ccc");
             }
         });
-        $("#usePhoto").blur(function(){
+        $("#usePhoto").blur(function () {
             if (pho_pattern.test(oldPhoto)) {
-                tipFun.call(this,false,'')
-            } else  {
-                tipFun.call(this,true,'请填写正确的手机号码')
+                tipFun.call(this, false, '')
+            } else {
+                tipFun.call(this, true, '请填写正确的手机号码')
             }
         })
     }
@@ -74,9 +75,9 @@ $(function () {
         $('#photo_num').blur(function () {
             var phoa = $(this).val().trim();
             if (phoa == '') {
-                tipFun.call(this,true,'验证码不能为空')
-            }else{
-                tipFun.call(this,false,'')
+                tipFun.call(this, true, '验证码不能为空')
+            } else {
+                tipFun.call(this, false, '')
             }
         })
     }
@@ -84,42 +85,43 @@ $(function () {
     /*失去焦点处理 */
     blurFun();
     /* 提示框函数处理 */
-    function tipFun(state,txt){
-        let _this=this;
-        if(state){
+    function tipFun(state, txt) {
+        let _this = this;
+        if (state) {
             $(_this).siblings('.Tips').text(txt);
             $(_this).siblings('.Tips').addClass('active')
-        }else{
+        } else {
             $(_this).siblings('.Tips').text('');
             $(_this).siblings('.Tips').removeClass('active')
         }
     }
-    function blurFun(){
-        $('#username').blur(function(){
-            if(!$(this).val().trim()){
-                tipFun.call(this,true,'请填写用户名')
-            }else {
-                tipFun.call(this,false,'')
+
+    function blurFun() {
+        $('#username').blur(function () {
+            if (!$(this).val().trim()) {
+                tipFun.call(this, true, '请填写用户名')
+            } else {
+                tipFun.call(this, false, '')
             }
         })
         $('#userpassword').blur(function () {
             var pass_pattern = /^[a-zA-Z\d_]{6,12}$/;
             var pass1 = $(this).val().trim();
             var tt = $('#userpassword2').val().trim();
-            if (!pass1|| !(pass_pattern.test(pass1))) {
-                tipFun.call(this,true,'请输入6-12位数的密码')
-            }else if(pass1===tt){
-                tipFun.call($('#userpassword2'),false,'');
-            }else{
-                tipFun.call(this,false,'')
-                tipFun.call($('#userpassword2'),true,'两次密码不一致');
+            if (!pass1 || !(pass_pattern.test(pass1))) {
+                tipFun.call(this, true, '请输入6-12位数的密码')
+            } else if (pass1 === tt) {
+                tipFun.call($('#userpassword2'), false, '');
+            } else {
+                tipFun.call(this, false, '')
+                tipFun.call($('#userpassword2'), true, '两次密码不一致');
             }
         });
-        $('#customerName').blur(function(){
-            if(!$(this).val().trim()){
-                tipFun.call(this,true,'请填写客户名称')
-            }else{
-                tipFun.call(this,false,'')
+        $('#customerName').blur(function () {
+            if (!$(this).val().trim()) {
+                tipFun.call(this, true, '请填写客户名称')
+            } else {
+                tipFun.call(this, false, '')
             }
         });
 
@@ -127,13 +129,14 @@ $(function () {
             var orepeat = $(this).val();
             var passw = $('#userpassword').val();
             if (passw !== orepeat || passw == '') {
-                tipFun.call(this,true,'两次密码不一致')
-            }else{
-                tipFun.call(this,false,'')
+                tipFun.call(this, true, '两次密码不一致')
+            } else {
+                tipFun.call(this, false, '')
             }
         });
     }
-    function initVal(){
+
+    function initVal() {
         $('#protocol').prop("checked", false)
         $(this).prop('checked', false)
         $(this).parent().addClass('cheackeds_no').removeClass('cheackeds');
@@ -144,8 +147,8 @@ $(function () {
         })
     }
     //表单提交
-    if(window.location.search.indexOf('code')>-1){
-       let code =  (window.location.search).split('=');
+    if (window.location.search.indexOf('code') > -1) {
+        let code = (window.location.search).split('=');
         $('#beInviteCode').val(code[1]);
     }
     $("#form_register").submit(function (e) {
@@ -155,71 +158,69 @@ $(function () {
             password1 = $("#userpassword").val(),
             password2 = $("#userpassword2").val(),
             customerType = $('#customerTypes').val(),
-            mobileCode = $('#photo_num').val(),//手机验证码
+            mobileCode = $('#photo_num').val(), //验证码
             codeV = $('#beInviteCode').val();
-            if(password1!==password2){
-                tipFun.call($('#userpassword2'),true,'两次密码不一致');
-                return;
-            };
-            if(!usePhoto&&!password1&&!mobileCode){
-                $('.Tips').text('请输入内容.');
-                $('.Tips').addClass('active');
-                return ;
-            }
-            // if(phopoVal[0]!==usePhoto){
-            //     tipFun.call($('#usePhoto'),true,'当前手机号与获得验证码的手机号不一致.')
-            //     return ;
-            // }
-        // if($('.Tips.active').length){
-        //     return;
-        // } else {
-        //     $('.loading').show();
-        //     $.ajax({
-        //         type: "POST",
-        //         dataType: "json",
-        //         url: globalConfig.context + "/register",
-        //         data: {
-        //             "unitName": user,
-        //             "password": password1,
-        //             "mobile": usePhoto,
-        //             "mobileCode": mobileCode,
-        //             "type":customerType,
-        //             "beInviteCode":codeV
-        //         },
-        //         success: function (rest) {
-        //             $('.loading').hide()
-        //             if (rest.error && rest.error.length) {
-        //                 msg(rest.error[0].message);
-        //             } else {
-        //                 setTimeout(()=>{
-                                msg("恭喜您,注册成功!入驻发布信息,请联系平台管理员激活账户,谢谢");
-                                setTimeout(() => {
-                                    window.location.pathname = 'portal/index';
-                                }, 1000)
-        //                     initVal();
-        //                     if($('.header ul li a').hasClass('head_login')){
-        //                         $('.login').fadeIn(800);
-        //                         $('#form_register').fadeOut(800)
-        //                     }
-        //                 },2000)
-        //             }
-        //         }
-        //     })
+        if (password1 !== password2) {
+            tipFun.call($('#userpassword2'), true, '两次密码不一致');
+            return;
+        };
+        if (!usePhoto && !password1 && !mobileCode) {
+            $('.Tips').text('请输入内容.');
+            $('.Tips').addClass('active');
+            return;
+        }
+        // if(phopoVal[0]!==usePhoto){
+        //     tipFun.call($('#usePhoto'),true,'当前手机号与获得验证码的手机号不一致.')
+        //     return ;
         // }
+        if ($('.Tips.active').length) {
+            return;
+        } else {
+            $('.loading').show();
+            $.ajax({
+                type: "POST",
+                dataType: "json",
+                url: globalConfig.context + "/register",
+                data: {
+                    "unitName": user,
+                    "password": password1,
+                    "mobile": usePhoto,
+                    "mobileCode": mobileCode,
+                    "type": customerType,
+                    "beInviteCode": codeV
+                },
+                success: function (rest) {
+                    $('.loading').hide()
+                    if (rest.error && rest.error.length) {
+                        msg(rest.error[0].message);
+                    } else {
+                        setTimeout(() => {
+                            msg("恭喜您,注册成功!入驻发布信息,请联系平台管理员激活账户,谢谢");
+                            initVal();
+                            if ($('.header ul li a').hasClass('head_login')) {
+                                $('.login').fadeIn(800);
+                                $('#form_register').fadeOut(800)
+                            }
+                        }, 2000)
+                    }
+                }
+            })
+        }
     })
     agreement();
-    function agreement(){
-        $('.head_login_').click(function(){
+
+    function agreement() {
+        $('.head_login_').click(function () {
             $('.login_').show();
         })
-        $('.login_close_').click(function(){
+        $('.login_close_').click(function () {
             $('.login_').hide();
         })
     }
     var tt = 30;
 
     $('#tipFun').click(function () {
-        phopoVal=[];
+        phopoVal = [];
         var ophoto = $('#usePhoto').val().trim();
         if (ophoto) {
             phopoVal.push(ophoto);
@@ -263,9 +264,9 @@ $(function () {
     });
     //提示框渐隐函数
     function msg(mess) {
-        if($('.smg').hasClass('active')){
-			return ;
-		}
+        if ($('.smg').hasClass('active')) {
+            return;
+        }
         $('.smg').addClass('active')
         $('#msg').val(mess);
         setTimeout(function () {
@@ -275,10 +276,29 @@ $(function () {
     }
     //注册 底部图片处理
     footerImg()
-    function footerImg(){
-        $('.cont_left img').css('display','none');
-        $('.cont_center img').css('display','none');
-        $('.cont_left div').css('display','block');
-        $('.cont_center div').css('display','block');
+
+    function footerImg() {
+        $('.cont_left img').css('display', 'none');
+        $('.cont_center img').css('display', 'none');
+        $('.cont_left div').css('display', 'block');
+        $('.cont_center div').css('display', 'block');
     }
-});
+
+
+    $.ajax({
+        type: "GET",
+        url: globalConfig.context + "/open/getVCode",
+        success: function (data) {
+            $(".zhuce_input #photo").attr("src", globalConfig.context+ "/open/getVCode")
+        }
+    })
+    $(".zhuce_input #photo").click(function(){
+        $.ajax({
+            type: "GET",
+            url: globalConfig.context + "/open/getVCode",
+            success: function (data) {
+                $(".zhuce_input #photo").attr("src", globalConfig.context+ "/open/getVCode")
+            }
+        })
+    })
+})

+ 6 - 2
template/register.html

@@ -53,10 +53,14 @@
 						<span class="star"> * </span>
 						<span class="Tips active"></span>
 					</div>
+					<div class="slider">
+						拖动滑块验证
+						<div class="slider_btn"></div>
+					</div>
 					<div class="zhuce_input">
 						<img src="../img/indedImg/enroll4.png" alt=""/>
-						<input type="text" name="cellCode" placeholder="手机验证码" id="photo_num" autocomplete="off" />
-						<input type="button" id="photo" value="获取验证码" disabled="disabled"/>
+						<input type="text" name="cellCode" placeholder="验证码" id="photo_num" autocomplete="off" />
+						<img id="photo" src="" alt="">
 						<span class="star"> * </span>
 						<span class="Tips"></span>
 					</div>