zoukankan      html  css  js  c++  java
  • 注册时验证码动态时间实现思路

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

    后端具体思路:

    后端产生的验证码保存到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);       

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

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

  • 相关阅读:
    Property [*****] not found on type [com.erp.pojo.ErpSupplier]
    python 杀死线程的两种方式
    docker的学习之认识docker(一)
    Ubuntu下 MySQL不支持中文解决办法
    Django项目创建
    git介绍
    python 实现链表的逆置
    python 实现链表的增删改查(双向链表)
    python----super
    python面向对象
  • 原文地址:https://www.cnblogs.com/xjs1874704478/p/13904226.html
Copyright © 2011-2022 走看看