注册时都需要输入手机号或者邮箱来接收验证码。当点击发送验证码的时候,可以通过表单验证(正则表达式验证)检验 获取验证码账号的和合法性,合法时向后端发送获取验证码请求(后端向你输入的手机号发短信或者向邮箱发邮件)。
后端具体思路:
后端产生的验证码保存到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);
前端动态显示输入验证码的剩余时间