傳送驗證碼按鈕倒計時
阿新 • • 發佈:2018-10-31
<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>