springboot中邮箱验证按钮实现60秒后可重新获取(防止刷新)以及防重复发送
2021/6/9 10:35:38
本文主要是介绍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'); }); });
由此,我们的邮箱验证功能全部完成!(看到上面重复的代码,我们很自然会想到提取公共方法,以免代码冗余,这个工作就交给你们啦)
接下来我会写一个微信小程序的系列博客,小菜鸟不才,欢迎大家指正,一起加油和进步!
这篇关于springboot中邮箱验证按钮实现60秒后可重新获取(防止刷新)以及防重复发送的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南
- 2024-09-26Springboot微服务资料入门教程