SpringBoot + Thymeleaf 实现发送验证码计时器功能

SpringBoot + Thymeleaf 实现发送验证码计时器功能

目录

​​1. 功能需求​​​​2. 效果图展示​​​​3. 代码​​​​4. 参考文献​​​​5. 联系我​​

1. 功能需求

2. 效果图展示

效果展示如下:

3. 代码

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 + "秒后可重新发送"); }}

前端代码展示如下:

为了方便学习,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 + "秒后可重新发送"); }}

4. 参考文献

​​1. JQuery setInterval() 方法 重复调用时 会出现问题 越来越快 清除也没用​​

5. 联系我

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。