JS实现注册登录发送短信验证码动态显示60S倒计时完整案例
1、页面发送短信验证码的表单
<div class="form-group">
<div class="col-xs-6 col-sm-7 col-md-7 col-lg-7" >
<input type="text" id="userPhone" class="form-control" placeholder="请输入手机号码">
</div>
<div class="col-xs-6 col-sm-5 col-md-5 col-lg-5" style="justify-content:flex-end;display: flex;">
<button type="button" class="btn btn-info" id="second">点击获取验证码</button>
</div>
</div>
<div class="form-group">
<input type="text" name="securityCode" class="form-control" placeholder="请输入验证码">
</div>
2、发送短信验证码的JS处理逻辑
<script type="text/javascript">
$("#second").click(function (){
sendyzm($("#second"));
});
//用ajax提交到后台的发送短信接口
function sendyzm(obj){
var phone = $("#userPhone").val();
var result = isPhoneNum();
if(result) {
$.ajax({
url:"http://localhost:8085/my/sendYzm",
data:{phone:phone},
dataType:"json",
type:"post",
async : false,
cache : false,
success:function(res){
debugger;
if(res){
alert("验证码发送成功");
}else{
}
},
error:function(){
alert("验证码发送失败");
}
})
setTime(obj);//开始倒计时
}
}
//60s倒计时实现逻辑
var countdown = 60;
function setTime(obj) {
if (countdown == 0) {
obj.prop('disabled', false);
obj.text("点击获取验证码");
countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
return;
} else {
obj.prop('disabled', true);
obj.text("("+countdown+"s)后重新发送") ;
countdown--;
}
setTimeout(function() { setTime(obj) },1000) //每1000毫秒执行一次
}
//校验手机号是否合法
function isPhoneNum(){
var phonenum = $("#userPhone").val();
var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!reg.test(phonenum)){
alert('请输入有效的手机号码!');
return false;
}else{
return true;
}
}
</script>
3、后台发送短信验证码接口(调用第三方短信服务商的发短信接口,各个服务商的发短信接口大同小异)
发表评论