本文介绍如何使用 JavaScript 实现短信验证码发送后的倒计时功能。通过正则表达式校验手机号格式,利用 setInterval 设置定时器,在倒计时结束后重置按钮状态并允许重新获取。代码包含完整的错误处理与状态标志位控制,适用于常见 Web 开发场景。
短信验证码倒计时代码实现
以下是实现短信验证码倒计时的具体代码示例:
$(function() {
var phone_num = /^1\d{10}$/;
var flag = 1; //短信发送时标志位
$(".getcode").click(function() {
if($("#phone").val() == "") {
alert("请输入电话号码!");
return false;
};
if(!phone_num.test($("#phone").val().trim())) {
alert("电话号码有误,请输入11位手机号!");
return false;
};
if(flag == 1) {
var i = 59;
flag = 0;
var n = setInterval(function() {
var j = i + 's';
$('.getcode').html(j);
i--;
if(i < -1) {
clearInterval(n);
flag = 1;
$('.getcode').html('重新获取').prop("disabled", false);
}
}, 1000);
}
})
});
上述内容展示了基于 JavaScript 的短信验证码倒计时实现方案,旨在为开发者提供参考。若在使用过程中遇到任何问题,欢迎留言交流,作者将及时回复。同时,感谢读者对本站的支持。