针对用户在个人中心绑定手机认证的一些js代码。

Posted 2020-10-19 再也伤不起

需求：

1：手机号码校验（格式的校验，手机号码是否已经绑定过）---未实现

2：填完手机号码，点击发送验证码，手机会收到一条信息

3：发送验证码按钮不可用，变成重新发送的倒计时

       1）：60秒以后又可以发送

       2）：前台页面刷新，点击发送验证码按钮，只要不到时间60s，仍然不能发送，前台提示  发送频繁

4：输入收到的手机验证码

5：点击确定，验证验证码正确，绑定手机

     1）：验证码错误，无法绑定

     2）：绑定的手机号必须和发送验证码的手机号相同

     3）：验证码本身设置过期时间  一般5分钟

 

js代码：

 1     $(function(){
 2         //如果没绑定手机才会出现这些代码
 3         <#if !userinfo.isBindPhone>
 4         //给点击绑定手机添加时间
 5         $("#btn_showBindPhone").click(function(){
 6             $("#bindPhoneModal").modal("show");
 7         })
 8         
 9         //点击发送按钮的倒计时处理
10         $("#sendVerifyCode").click(function(){
11             var phonenumber=$("#phoneNumber").val();
12             var _me=$(this);
13             if(phonenumber){
14                 _me.attr("disabled",true);
15                 var time=60;
16                 $.ajax({
17                     dataType:"json",
18                     type:"POST",
19                     url:"/sendVerifyCode.do",
20                     data:{phoneNumber:phonenumber},
21                     success:function(data){
22                         if(data.success){
23                             //发送成功,开始倒计时处理
24                             var timer=window.setInterval(function(){
25                                 time--;
26                                 if(time>0){
27                                     _me.text(time+"秒后重新发送!");
28                                 }else{
29                                     //清除计时器
30                                     window.clearInterval(timer);
31                                     _me.text("重新发送验证码");
32                                     _me.attr("disabled",false);
33                                 }
34                             },1000);
35                         }else{
36                             //发送失败,提示错误信息
37                             $.messager.popup(data.msg);
38                             _me.attr("disabled",false);//重置按钮为可用
39                         }
40                     }
41                 });
42             }
43         });
44         
45         //提交绑定手机按钮响应事件
46         $("#bindPhone").click(function(){
47             $("#bindForm").ajaxSubmit(function(data){
48                 if(data.success){
49                     $.messager.confirm("提示","绑定手机成功!",function(){
50                         //绑定成功，重新加载页面
51                         window.location.reload();
52                     });
53                 }else{
54                     $.messager.popup(data.msg);
55                 }
56             });
57         })
58     });
59         </#if>

模态框:

 1 <#if !userinfo.isBindPhone>
 2         <!-- 绑定手机模式窗口 -->
 3         <div class="modal fade" id="bindPhoneModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
 4           <div class="modal-dialog" role="document">
 5             <div class="modal-content">
 6               <div class="modal-header">
 7             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 8             <h4 class="modal-title" id="exampleModalLabel">绑定手机</h4>
 9               </div>
10               <div class="modal-body">
11                 <form class="form-horizontal" id="bindForm" method="post" action="/bindPhone.do">
12                     <div class="form-group">
13                             <label for="phoneNumber" class="col-sm-2 control-label">手机号:</label>
14                             <div class="col-sm-4">
15                               <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" />
16                               <button id="sendVerifyCode" class="btn btn-primary" type="button">发送验证码</button>
17                             </div>
18                         </div>
19                         <div class="form-group">
20                             <label for="verifyCode" class="col-sm-2 control-label">验证码:</label>
21                             <div class="col-sm-4">
22                               <input type="text" class="form-control" id="verifyCode" name="verifyCode" />
23                             </div>
24                         </div>
25                 </form>
26               </div>
27               <div class="modal-footer">
28                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
29                 <button type="button" class="btn btn-primary" id="bindPhone">保存</button>
30               </div>
31             </div>
32           </div>
33         </div>
34  </#if>