jQuery实现获取验证码倒计时功能

最新推荐文章于 2024-07-20 21:16:51 发布

转载最新推荐文章于 2024-07-20 21:16:51 发布 · 406 阅读

本文介绍了一个使用JavaScript实现的手机号验证及验证码倒计时功能。通过正则表达式验证手机号格式，并利用定时器实现获取验证码后的倒计时禁用按钮功能。

“`
var code = “”; //接收验证码
$(‘#code-btn’).click(function(){ var count = 5; var phone=$ (“#phone”).val();//手机号码
var reg_phone = /1\d{10}/;
if(!reg_phone.test(phone)){ //验证手机是否符合格式
alert(“填写手机号”);
return false;
}
//开始计时
$(“#code-btn”).attr(‘disabled’,’disabled’);$ (“#code-btn”).html(“倒计时” + count + “秒”);
var timer = setInterval(function(){
count–;
$(“#code-btn”).html(“倒计时” + count + “秒”); if (count==0) { clearInterval(timer);$ (“#code-btn”).attr(“disabled”,false);//启用按钮
$(“#code-btn”).html(“重新发送验证码”);
code = “”;//清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}
},1000);

//向后台发送处理数据  
$.ajax({  
    type: "POST", //用POST方式传输  
    dataType: "text", //数据格式:JSON  
    url: '', //目标地址  
    data: "phone=" + phone + "&code=" + code,  
    error: function (XMLHttpRequest, textStatus, errorThrown) { },  
    success: function (msg){ }  
});

});