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

本文章通过实战记录相关问题以及提供解决方案。

公众号：恩故事还在继续

1. 功能需求

实现找回密码然后点击获取验证码之后出现XX秒候重新获取验证码效果，如下图所示:

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

}

前端代码展示如下:

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

}

4. 参考文献

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

5. 联系我