<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>
发送验证码按钮倒计时
猜你喜欢
转载自blog.csdn.net/weixin_42633131/article/details/83419207
今日推荐
周排行