SpringBoot + Thymeleaf 實作發送驗證碼計時器功能

👤 公衆号：恩故事還在繼續

目錄

• ​​1. 功能需求​​
• ​​2. 效果圖展示​​
• ​​3. 代碼​​
• ​​4. 參考文獻​​
• ​​5. 聯系我​​

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. 參考文獻

5. 聯系我