需求：

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>

針對用戶在個人中心綁定手機認證的一些js代碼。