JSP页面生成验证码功能

最新推荐文章于 2021-10-17 23:06:26 发布

weixin_34128534

最新推荐文章于 2021-10-17 23:06:26 发布

阅读量109

点赞数

文章标签： java javascript ViewUI

  1 <%@ page language="java" contentType="text/html; charset=UTF-8" import="java.net.*" pageEncoding="UTF-8"%>
  2 <!DOCTYPE html>
  3 <html>
  4 <head>
  5 <%
  6     if(request.getAttribute("user")==null){
  7         String username=null;
  8         String password=null;
  9         
 10         Cookie[] cookies=request.getCookies();
 11         for(int i=0;cookies!=null && i<cookies.length;i++){
 12             if(cookies[i].getName().equals("user")){
 13                 username=URLDecoder.decode(cookies[i].getValue().split("-")[0],"UTF-8");
 14                 password=URLDecoder.decode(cookies[i].getValue().split("-")[1],"UTF-8");
 15          }
 16         if(username==null){
 17             username="";
 18         }
 19         
 20         if(password==null){
 21             password="";
 22         }
 23         
 24         pageContext.setAttribute("username", username);
 25         pageContext.setAttribute("password", password);
 26     }
 27     }
 28 %>
 29 <title>登录页</title>
 30        <script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.5.1.js"></script>
 31        <script type="text/javascript" src="${pageContext.request.contextPath}/js/login.js"></script>
 32        <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet">
 33        <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
 34        <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
 35        <script type="text/javascript">
 36          function loadImage(){
 37          document.getElementById("randImage").src = "${pageContext.request.contextPath}/image.jsp?"+Math.random(); //Math.random()方法非常重要，它使每次的请求都不同以便重新发送。如果每次的请求都一样，那么不会重新生成页面
 38          }
 39       </script>
 40 <style type="text/css">
 41 body {
 42     padding-top: 40px;
 43     padding-bottom: 40px;
 44     background-color: #f5f5f5;
 45 }
 46 
 47 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td
 48     {
 49     margin: 0;
 50     padding: 0;
 51 }
 52 
 53 .form-signin {
 54     max-width: 500px;
 55     padding: 19px 29px 29px;
 56     margin: 0 auto 20px;
 57     background-color: #fff;
 58     border: 1px solid #e5e5e5;
 59     -webkit-border-radius: 5px;
 60     -moz-border-radius: 5px;
 61     border-radius: 5px;
 62     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
 63     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
 64     box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
 65 }
 66 
 67 .form-signin .form-signin-heading,.form-signin .checkbox {
 68     margin-bottom: 15px;
 69 }
 70 
 71 .form-signin input[type="text"],.form-signin input[type="password"] {
 72     height: auto;
 73     margin-bottom: 15px;
 74     padding: 7px 9px;
 75 }
 76 
 77 h1 {
 78     color: #fff;
 79     background: #06b;
 80     padding: 10px;
 81     font-size: 200%;
 82     text-align: center;
 83 }
 84 .labelError{line-height: 9px; font-size: 10pt; color: #f40000; border: 1px #ffb8b8 solid; padding: 8px 8px 8px 35px; background: url(/StudentManagerWeb/images/error.png) no-repeat; background-color: #fef2f2;}
 85 </style>
 86 </head>
 87 <body>
 88     <div>
 89         <form class="form-signin" action="${pageContext.request.contextPath}/login" method="post" onSubmit="return check()">
 90             <h2 class="form-signin-heading">管理员登录</h2>
 91             <hr>
 92             <table>
 93                     <tr>
 94                          <td ></td>                
 95                          <td><font color="red">${error }</font></td>
 96                          <td></td>            
 97                     </tr>
 98             
 99                     <tr>
100                          <td align="right">用户名：</td>                
101                          <td><input type="text" name="username" id="username" class="input" value="${username} "></td>
102                          <td><label class="labelError" id="usernameError"></label></td>            
103                     </tr>
104                     
105                      <tr>
106                          <td align="right">密码：</td>                
107                          <td><input type="password" name="password" id="password" class="input" value="${password }"></td>
108                          <td><label class="labelError" id="passwordError"></label></td>            
109                     </tr>
110                     
111                     <tr>
112                          <td align="right">验证码：</td>                
113                          <td><input type="text" name="imageValue" size="50px" id="imageValue" class="input" value="${verifyCode }"></td>
114                          <td><label class="labelError" id="imageValueError"></label></td>            
115                     </tr>
116                     
117                     
118                      <tr>
119                          <td ></td>                
120                          <td>
121                           <img onClick="javascript:loadImage();"  title="换一张试试" id="randImage" 
122                           src="${pageContext.request.contextPath}/image.jsp" width="100" height="200" border="1" align="absmiddle"></td>
123                          <td> </td>            
124                     </tr>
125                      <tr>
126                          <td ></td>                
127                          <td colspan="2"><label class="checkbox"><input id="remember" name="remember" type="checkbox" value="remember-me">记住我一周 &nbsp;&nbsp;&nbsp;&nbsp;  </label></td>
128                          <td></td>            
129                     </tr>
130                      <tr>
131                          <td ></td>                
132                          <td><button type="submit"  class="btn btn-primary">登陆</button> <input type="reset" class="btn btn-primary" value="重写"/></td>
133                          <td></td>            
134                     </tr>
135             </table>
136         </form>
137     </div>
138 </body>
139 </html>

以上是 login.jsp

以下是image.jsp生成验证码

 1 <%@ page contentType="image/jpeg"
 2     import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"
 3     pageEncoding="utf-8"%>
 4 <%!Color getRandColor(int fc, int bc) {
 5         Random random = new Random();
 6         if (fc > 255)
 7             fc = 255;
 8         if (bc > 255)
 9             bc = 255;
10         int r = fc + random.nextInt(bc - fc);
11         int g = fc + random.nextInt(bc - fc);
12         int b = fc + random.nextInt(bc - fc);
13         return new Color(r, g, b);
14     }%>
15 <%
16     out.clear(); /*这句针对resin服务器，如果是tomacat可以不要这句*/
17     
18     out.clear();
19     //设置页面不缓存  
20     response.setHeader("Prama","No-cache");
21     response.setHeader("Cache-Control","no-cache");
22     response.setDateHeader("Expires",0);
23     
24     //在内存中创建图象 
25     int width=60;
26     int height=20;
27     BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
28     
29     //创建图象  
30     Graphics g = image.getGraphics();
31     
32     //生成随机对象  
33     Random random = new Random();
34     
35     //设置背景色  
36     g.setColor(getRandColor(200,250));
37     g.fillRect(0,0,width,height);
38     //设置字体  
39     g.setFont(new Font("Tines Nev Roman",Font.PLAIN,18));  
40     
41     //随机产生干扰线  
42     g.setColor(getRandColor(160, 200));
43     for (int i = 0; i < 155; i++) {
44         int x = random.nextInt(width);
45         int y = random.nextInt(height);
46         int xl = random.nextInt(12);
47         int yl = random.nextInt(12);
48         g.drawLine(x, y, x + xl, y + yl);
49     }
50     //随机产生认证码,4位数字
51     String sRand = "";
52     for(int i=0;i<4;i++){
53         String rand = String.valueOf(random.nextInt(10));
54         sRand += rand;
55          //将认证码显示到图象中  
56         g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
57         g.drawString(rand,13*i+6,16);
58     }
59     // 将认证码存入SESSION
60     session.setAttribute("sRand", sRand);
61     //图像生效
62     g.dispose();
63     //输出图像到页面  
64     ImageIO.write(image, "JPEG", response.getOutputStream());
65 %>