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

需求：

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

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

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

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

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

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

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

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

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

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

js代码：

     $(function(){
         //如果没绑定手机才会出现这些代码
         <#if !userinfo.isBindPhone>
         //给点击绑定手机添加时间
         $("#btn_showBindPhone").click(function(){
             $("#bindPhoneModal").modal("show");
         })

         //点击发送按钮的倒计时处理
         $("#sendVerifyCode").click(function(){
             var phonenumber=$("#phoneNumber").val();
             var _me=$(this);
             if(phonenumber){
                 _me.attr("disabled",true);
                 var time=60;
                 $.ajax({
                     dataType:"json",
                     type:"POST",
                     url:"/sendVerifyCode.do",
                     data:{phoneNumber:phonenumber},
                     success:function(data){
                         if(data.success){
                             //发送成功,开始倒计时处理
                             var timer=window.setInterval(function(){
                                 time--;
                                 if(time>0){
                                     _me.text(time+"秒后重新发送!");
                                 }else{
                                     //清除计时器
                                     window.clearInterval(timer);
                                     _me.text("重新发送验证码");
                                     _me.attr("disabled",false);
                                 }
                             },1000);
                         }else{
                             //发送失败,提示错误信息
                             $.messager.popup(data.msg);
                             _me.attr("disabled",false);//重置按钮为可用
                         }
                     }
                 });
             }
         });

         //提交绑定手机按钮响应事件
         $("#bindPhone").click(function(){
             $("#bindForm").ajaxSubmit(function(data){
                 if(data.success){
                     $.messager.confirm("提示","绑定手机成功!",function(){
                         //绑定成功，重新加载页面
                         window.location.reload();
                     });
                 }else{
                     $.messager.popup(data.msg);
                 }
             });
         })
     });
         </#if>

模态框:

 <#if !userinfo.isBindPhone>
         <!-- 绑定手机模式窗口 -->
         <div class="modal fade" id="bindPhoneModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
           <div class="modal-dialog" role="document">
             <div class="modal-content">
               <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             <h4 class="modal-title" id="exampleModalLabel">绑定手机</h4>
               </div>
               <div class="modal-body">
                 <form class="form-horizontal" id="bindForm" method="post" action="/bindPhone.do">
                     <div class="form-group">
                             <label for="phoneNumber" class="col-sm-2 control-label">手机号:</label>
                             <div class="col-sm-4">
                               <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" />
                               <button id="sendVerifyCode" class="btn btn-primary" type="button">发送验证码</button>
                             </div>
                         </div>
                         <div class="form-group">
                             <label for="verifyCode" class="col-sm-2 control-label">验证码:</label>
                             <div class="col-sm-4">
                               <input type="text" class="form-control" id="verifyCode" name="verifyCode" />
                             </div>
                         </div>
                 </form>
               </div>
               <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                 <button type="button" class="btn btn-primary" id="bindPhone">保存</button>
               </div>
             </div>
           </div>
         </div>
  </#if>

运行：

输错：

60秒到可以重新发送：

点击发送验证码按钮之后立刻刷新验证码以后再次发送：