注册时验证码动态时间实现思路

注册时都需要输入手机号或者邮箱来接收验证码。当点击发送验证码的时候,可以通过表单验证(正则表达式验证)检验 获取验证码账号的和合法性,合法时向后端发送获取验证码请求(后端向你输入的手机号发短信或者向邮箱发邮件)。

后端具体思路:

后端产生的验证码保存到session中,可以定时删除session中的验证码(而不是设置session的过期时间)

产生的验证码可以以邮件或者短信(模板)的形式发送给申请人

        /**
     * 设置5分钟后删除session中的验证码
     * @param session
     * @param attrName
     */
    private void removeAttrbute(final HttpSession session, final String attrName) {
        final Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                // 删除session中存的验证码
                session.removeAttribute(attrName);
                timer.cancel();
            }
        }, 5 * 60 * 1000);
    }        

在响应给前端验证码时,同时调用删除验证码

            //向session中保存验证码
            session.setAttribute(attrName, verifyCode.toLowerCase());
            // 生成验证码流,响应到浏览器
            int w = 99, h = 38;
            VerifyCodeUtils.outputImage(w, h, response.getOutputStream(), verifyCode);
            //定时5分钟删除验证码
            this.removeAttrbute(session, attrName); 
                                                   

前端具体思路:

1.前端设置发送验证码按钮(点完之后)为禁用

$("#send").prop("disabled",true);

2.定时器

//定时器
var s1 = 60;
var id = window.setInterval(function () {
    $("#send").html(s1+"s后重新发送");
    s1--;
    if(s1 == 0){//可以发送了
        window.clearInterval(id);//根据id清除定时器
        $("#send").prop("disabled",false);//让按钮启用
        $("#send").html("发送验证码");
         //修改按钮的样式
    }
},1000);       

前端动态显示输入验证码的剩余时间

以上看注释的大致思路,具体代码实现自己写***

原文地址:https://www.cnblogs.com/xjs1874704478/p/13904226.html