1. 程式人生 > >傳送驗證碼按鈕倒計時

傳送驗證碼按鈕倒計時

<input type="text" id="telephone" value="" name="telephone" class="fn-tinput" placeholder="手機號" required data-rule-mobile="true" data-msg-required="請輸入手機號" data-msg-mobile="請輸入正確格式" />

<input type="text" value="" name="checkcode" class="fn-tinput" placeholder="請輸入驗證碼" required />
<
input
type="button" onclick="sendCode(this)" class="btn btn-default" value="獲取驗證碼">
<script> var nums=5; var clock=null; var btn=null; function sendCode(thisBth) { //發起ajax,請求後臺 // 校驗手機號是否符合規範 var tel=
$("#telephone").val(); // 編寫校驗規則 var regex = /^1[3,4,5,7,8,9][0-9]{9}$/; // 發出ajax if(regex.test(tel)){ $.ajax({ url:
"/user/sendSms", type:"get", data:{"telephone":tel}, statusCode:{ } }) // 按鈕失效 this.btn=thisBth // 按鈕的文字 thisBth.disabled=true; // 迴圈 clock=window.setInterval(doLoop,1000); }else{ alert("手機號碼不符合規範"); } } function doLoop() { nums--; if (nums==0){ // 停止定時器 window.clearInterval(clock); // 文字改變 btn.value="重新發送驗證碼"; // 按鈕恢復 btn.disabled=false; // 倒計時歸60 nums=5; }else{ btn.value=nums+"秒後重新發送"; } }
</script>