验证码过期(小功能)

原创

Justcto998 2022-09-05 10:28:12 博主文章分类：Jsp/Servlet ©著作权

文章标签 js 验证码过期短信验证码 html 验证码 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者Justcto998的原创作品，请联系作者获取转载授权，否则将追究法律责任

作用：模拟获取验证码，10s后，重新获取。未过期前不可重复获取；

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
    //获取随机短信  --不使用了
    Random r = new Random();
    StringBuilder sb =  new StringBuilder();
    for(int i=0;i<=5;i++){
    int s = r.nextInt(10);
    sb.append(s);
    }
  
 %>

<!DOCTYPE HTML>
<html>
  <head>
    <title>短信验证码</title>
  <script src="mobile/jquery-1.4.3.min.js" charset="utf-8"></script>
  <link rel="stylesheet" href="mobile/mobile.css">
  <script type="text/javascript">
  $(function(){
      var code = 0;
    var flag = false;
    var get = false;
    $('#get').click(function(){
        if(flag)return;//未过期 不可再获取
        sendSmsCode();
    });
    
    function sendSmsCode(){
    //url:'getSms',      也可以
    //因为存在 异步执行的问题 所以 在ajax成功后，再设置某些值
      $.ajax({
          type : "POST",
          url  : '<%=path%>/getSms',
          data : {
          method:"getSmsCode"
           },
          dataType : "json",
        success : function(data) {
              code = data;
              $('#code').html('验证码为：'+code);
              $('#get').attr('disabled','true');
          flag = true;
          get = true;
          time();
           },
        error : function(data) {
        $('#code').html("对不起服务器繁忙，请稍后再试！");
    }
  });
  }
  
      function time(){
     var t = 10;
     var time = window.setInterval(function(){
       t--;
       $('#get').val(t+'秒后失效');
       if(t==0){
         $('#code').html('验证码已失效，请重新获取！');
         $('#get').val('获取验证码');
         $('#get').removeAttr('disabled');
         flag = false;
         send = false;
         clearInterval(time);
       }  
     },1000);
     }
    
    
    $('#in').click(function(){
        if(!get) {alert('请获取短信验证码！');return;}
      if(!flag) {alert('短信验证码已失效！');return;}
      var rs = $('input[name="sms"]').val();
      if(rs.length==0){
      alert('请输入短信验证码！');
      return;
      }
      if(rs != code){
      alert('短信验证码错误!');
      }else{
      alert('正确!');
      }
      
    });
    
    
  });
  </script>
  
  </head>
  
  <body>
   <div>
   <br/>
   <h3 style="margin-left:110px">短信验证码 倒计时重新获取</h3></br>
   <span style="margin-left:100px;font-weight:bold;color:red">短信验证码：</span> 
   <input type="text" style="margin-left:0px;width:85px;font-weight:bold;" name="sms" placeholder="请输入验证码"/>
   <input type="button" style="height:30px;width:90px;color:blue;font-weight:bold;margin-left:10px" id="get" value="获取验证码"/><br/>
   <span id="code" style="margin-left:150px;color:red"></span><br/>
   </div>
   <br/>
   
   <input type="button" style="margin-left:130px;height:30px;width:200px;color:blue;font-weight:bold" value="确定并提交" id="in"/>
    
  </body>
</html>

后台随机产生验证码：

public class SmsService extends HttpServlet {

  private static final long serialVersionUID = 5846536395092919495L;

  @Override
  public void doPost(HttpServletRequest request,HttpServletResponse response)
                throws ServletException, IOException{
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=utf-8");
    String param = request.getParameter("method");
    System.out.println("================");
    System.out.println("param="+param);
    System.out.println("================");
    Random r = new Random();
    StringBuilder sb =  new StringBuilder();
    for(int i=0;i<=5;i++){
    int s = r.nextInt(10);
    sb.append(s);
    }
    System.out.println("短信验证码 ："+sb);
    PrintWriter pw = response.getWriter();
    pw.write(sb.toString());
    pw.flush();
    pw.close();
    
  }

}