本文章通过实战记录相关问题以及提供解决方案。
公众号:恩故事还在继续
实现找回密码然后点击获取验证码之后出现XX秒候重新获取验证码效果,如下图所示:
效果展示如下:
js 核心代码如下所示
let InterValObj; //timer变量,控制时间
let count = 60; //间隔函数,1秒执行
let curCount;//当前剩余秒数
//发送验证码
function sendMessage() {
curCount = count;
// //添加禁用按钮类
$("#getKaptcha").addClass("disabled");
$("#getKaptcha").text(curCount + "秒后可重新发送");
// 防止 setInterval 多次注册 导致计时器计时不正确
window.clearInterval(InterValObj);
// 启动计时器,1秒执行一次请求后台发送验证码
InterValObj = window.setInterval(SetRemainTime, 1000);
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#getKaptcha").removeClass("disabled");//移除禁用按钮类
$("#getKaptcha").text("重新发送验证码");
return ;
} else {
curCount--;
$("#getKaptcha").text(curCount + "秒后可重新发送");
}
}
前端代码展示如下:
<div class="main">
<div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
<form class="mt-5" method="post" th:action="@{/user/resetPwd}">
<div class="form-group row">
<label for="your-email" class="col-sm-2 col-form-label text-right">邮箱:</label>
<div class="col-sm-10">
<input type="email" th:class="|form-control ${emailMsg!=null?'is-invalid':''}|"
id="your-email" name="email" placeholder="请输入您的邮箱!" required>
<div class="invalid-feedback" th:text="${emailMsg}">
该邮箱已被注册!
</div>
</div>
</div>
<div class="form-group row mt-4">
<label for="verifycode" class="col-sm-2 col-form-label text-right">验证码:</label>
<div class="col-sm-6">
<input type="text" th:class="|form-control ${codeMsg!=null?'is-invalid':''}|"
id="verifycode" name="code" placeholder="请输入验证码!">
<div class="invalid-feedback" th:text="${codeMsg}">
验证码不正确!
</div>
</div>
<div class="col-sm-4">
<a href="javascript:getKaptchaCode();" id="getKaptcha"
class="btn btn-info form-control">获取验证码</a>
</div>
</div>
<div class="form-group row mt-4">
<label for="your-password" class="col-sm-2 col-form-label text-right">新密码:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="your-password" name="password"
placeholder="请输入新的密码!" autocomplete required>
<div class="invalid-feedback">
密码长度不能小于8位!
</div>
</div>
</div>
<div class="form-group row mt-4">
<div class="col-sm-2"></div>
<div class="col-sm-10 text-center">
<button type="submit" class="btn btn-info text-white form-control">重置密码</button>
</div>
</div>
</form>
</div>
</div>
为了方便学习,JS 完整代码如下所示
$(function () {
$("#getKaptcha").click(getKaptchaCode);
})
function getKaptchaCode() {
let email = $("#your-email").val();
if(emailCheck()){
//执行发送验证码方法
sendMessage();
$.post(
CONTEXT_PATH + "/user/sendResetPwdKatcha",
{
"email": email
},
function (data) {
data = $.parseJSON(data);
if (data.code == 0) {
alert("验证码已发送,有效时间2分钟");
} else {
alert("发送失败,请重试!");
}
}
)
} else{
alert("请输入正确的邮箱格式!");
}
}
// 校验邮箱格式
function emailCheck () {
let email = $("#your-email").val();
let emailPat=/^(.+)@(.+)$/;
let matchArray=email.match(emailPat);
if (matchArray == null) {
return false;
}
return true;
}
let InterValObj; //timer变量,控制时间
let count = 60; //间隔函数,1秒执行
let curCount;//当前剩余秒数
//发送验证码
function sendMessage() {
curCount = count;
// //添加禁用按钮类
$("#getKaptcha").addClass("disabled");
$("#getKaptcha").text(curCount + "秒后可重新发送");
// 防止 setInterval 多次注册 导致计时器计时不正确
window.clearInterval(InterValObj);
// 启动计时器,1秒执行一次请求后台发送验证码
InterValObj = window.setInterval(SetRemainTime, 1000);
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#getKaptcha").removeClass("disabled");//移除禁用按钮类
$("#getKaptcha").text("重新发送验证码");
return ;
} else {
curCount--;
$("#getKaptcha").text(curCount + "秒后可重新发送");
}
}
1. JQuery setInterval() 方法 重复调用时 会出现问题 越来越快 清除也没用