springboot中郵箱驗證按鈕實現60秒后可重新獲取（可防刷新）以及防重復發送

在上一篇文章springboot注冊功能中郵箱驗證的實現中（文章鏈接：https://www.cnblogs.com/mmimo/p/13234969.html），我們已經完成了最基本的郵箱驗證功能，現在我們來完善一下它，給它增加一個60秒后才能重新發送的功能

 

這個實現並不難，我們現在先來理一下思路：當用戶點擊發送后，按鈕變成不可點擊，並且開始倒計時，當倒計時結束后，按鈕變回可點擊，並且按鈕上的文字變回“獲取驗證碼”

 

上篇文章，我們寫的html中對應的“獲取驗證碼”的按鈕的id為getcode

 

基本的實現代碼如下：

 

var count = 60;

var resend = setInterval(function(){
    count--;
    if (count > 0){
        btn.val(count+"秒后可重新獲取");
    }else {
        clearInterval(resend);
        btn.val("獲取驗證碼").removeAttr('disabled style');
        }
    }, 1000);
    btn.attr('disabled',true).css('cursor','not-allowed');

 

實現效果如下：

 

可是到這里還沒有結束，因為當用戶只要刷新一下，用戶就又可以獲取驗證碼了，所以我們還要有一個防刷新的機制，因此我們可以利用cookie

 

代碼如下：

 

 /*防刷新：檢測是否存在cookie*/
        if($.cookie("captcha")){
            var count = $.cookie("captcha");
            var btn = $('#getcode');
            btn.text(count+'秒后可重新獲取').attr('disabled',true).css('cursor','not-allowed');
            var resend = setInterval(function(){
                count--;
                if (count > 0){
                    btn.val(count+'秒后可重新獲取').attr('disabled',true).css('cursor','not-allowed');
                    $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
                }else {
                    clearInterval(resend);
                    btn.val("獲取驗證碼").removeClass('disabled').removeAttr('disabled style');
                }
            }, 1000);
        }

（這代碼網絡上其他大佬已經發過了，我是模仿他們的）

 

總代碼如下：（當用戶點擊按鈕后，讓按鈕變為不可點擊；以及在頁面刷新后，先判斷cookie中有沒有存入count，有的話，將按鈕變為不可點擊）

 

$(function(){
        /*防刷新：檢測是否存在cookie*/
        if($.cookie("captcha")){// 判斷cookie存不存在
            var count = $.cookie("captcha"); // 從cookie中取出count
            var btn = $('#getcode');
            btn.text(count+'秒后可重新獲取').attr('disabled',true).css('cursor','not-allowed');
            var resend = setInterval(function(){
                count--;
                if (count > 0){
                    btn.val(count+'秒后可重新獲取').attr('disabled',true).css('cursor','not-allowed'); //把count保存到cookie中
                    $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
                }else {
                    clearInterval(resend);
                    btn.val("獲取驗證碼").removeClass('disabled').removeAttr('disabled style');
                }
            }, 1000);
        }

        /*點擊改變按鈕狀態，已經簡略掉ajax發送短信驗證的代碼*/
        $('#getcode').click(function(){

            //利用ajax發送驗證碼...(代碼已省略，上篇文章有)
           var btn = $(this);
            var count = 60;

            var resend = setInterval(function(){
                count--;
                if (count > 0){
                    btn.val(count+"秒后可重新獲取");
                    /* 將count存入cookie中 */
                    $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
                }else {
                    clearInterval(resend);
                    btn.val("獲取驗證碼").removeAttr('disabled style');
                    }
                }, 1000);
                btn.attr('disabled',true).css('cursor','not-allowed');


        });

    });

 

由此，我們的郵箱驗證功能全部完成！（看到上面重復的代碼，我們很自然會想到提取公共方法，以免代碼冗余，這個工作就交給你們啦）

接下來我會寫一個微信小程序的系列博客，小菜鳥不才，歡迎大家指正，一起加油和進步！