springboot中邮箱验证按钮实现60秒后可重新获取(防止刷新)以及防重复发送

在上一篇文章springboot注册功能中邮箱验证的实现中(文章链接:https://www.cnblogs.com/mmimo/p/13234969.html),我们已经完成了最基本的邮箱验证功能,现在我们来完善一下它,给它增加一个60秒后才能重新发送的功能

springboot中邮箱验证按钮实现60秒后可重新获取(防止刷新)以及防重复发送

 

这个实现并不难,我们现在先来理一下思路:当用户点击发送后,按钮变成不可点击,并且开始倒计时,当倒计时结束后,按钮变回可点击,并且按钮上的文字变回“获取验证码”

 

上篇文章,我们写的html中对应的“获取验证码”的按钮的id为getcode

springboot中邮箱验证按钮实现60秒后可重新获取(防止刷新)以及防重复发送

 

基本的实现代码如下:

 

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');

 

实现效果如下:

springboot中邮箱验证按钮实现60秒后可重新获取(防止刷新)以及防重复发送

springboot中邮箱验证按钮实现60秒后可重新获取(防止刷新)以及防重复发送

 

可是到这里还没有结束,因为当用户只要刷新一下,用户就又可以获取验证码了,所以我们还要有一个防刷新的机制,因此我们可以利用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');


        });

    });

 

由此,我们的邮箱验证功能全部完成!(看到上面重复的代码,我们很自然会想到提取公共方法,以免代码冗余,这个工作就交给你们啦)

接下来我会写一个微信小程序的系列博客,小菜鸟不才,欢迎大家指正,一起加油和进步!

上一篇:day01-day02


下一篇:不会安装Kubernetes学习环境?Mac笔记本上安排一个!