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

標籤：timer   smi   mod   不可用   中心   手機號碼   content   失敗   col   

需求：

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代碼。