JSP驗證碼與session不一緻處理方法

今天在調試項目的時候發現，在送出表單的時候的驗證碼有問題，問題是這樣的：就是通過debug模式檢視得知：jsp頁面生成的驗證碼和表單輸入的頁面輸入的一樣，但是到背景執行的時候，你會發現他們是不一樣的，現在上圖看看：

1.這是表單送出的時候:

2.這是背景得到的生成的驗證碼：

3.這是背景得到輸入的驗證碼：

這樣的問題還是頭一次出現，以前沒遇到過，經過google，baidu，最後得知是這樣的：因為加載jsp頁面比加載session快一些

那怎麼辦才能解決這個辦法呢，

又經過多次搜尋，思考，實踐，終于想出了個好辦法

1.在jsp頁面用js生成驗證碼并儲存在變量中，驗證碼作為參數傳到Java(繼承了HttpServlet)類

2.根據jsp頁面中傳過來的驗證碼畫出一個有幹擾線或幹擾點的圖檔

3.在WEB-INF/web.xml中配置 servlet

4.在jsp頁面調用配置好的servlet，一般是通過<img src="servlet名" id="code"/>調用

5.送出資料之前驗證

<form οnsubmit="return validate();"……/>

局部重新整理驗證碼：<a href="#" target="_blank" rel="external nofollow" οnclick="JavaScript:show();return false;">看不清,換一張！</a>-----return false;很重要啊

下面直接附上我的例子：

截圖如下：

代碼如下：

1.JAVA類：CodeServlet.java:

[java]  view plain  copy  

1. package cn.gov.csrc.servlet;  
2. import java.awt.Color;  
3. import java.awt.Font;  
4. import java.awt.Graphics;  
5. import java.awt.image.BufferedImage;  
6. import java.io.IOException;  
7. import java.util.Random;  
8. import javax.servlet.ServletException;  
9. import javax.servlet.http.HttpServlet;  
10. import javax.servlet.http.HttpServletRequest;  
11. import javax.servlet.http.HttpServletResponse;  
12. import com.sun.image.codec.jpeg.JPEGCodec;  
13. import com.sun.image.codec.jpeg.JPEGImageEncoder;  
14. public class CodeServlet extends HttpServlet {  
15.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
16.             throws ServletException, IOException {  
17.         response.setContentType("image/jpeg");  
18.         response.setHeader("Cache-Control", "no-cache");  
19.         response.setHeader("Pragma", "No-cache");  
20.         response.setDateHeader("Expires", 0L);  
21.         int width = 80;  
22.         int height = 30;  
23.         BufferedImage image = new BufferedImage(width, height, 1);  
24.         Graphics g = image.getGraphics();  
25.         Random random = new Random();  
26.         g.setColor(getRandColor(200, 250));  
27.         g.fillRect(0, 0, width, height);  
28.         g.setFont(new Font("Arial", 0, 25));  
29.         g.setColor(getRandColor(160, 200));  
30.         for (int i = 0; i < 155; i++) {  
31.             int x = random.nextInt(width + 100);  
32.             int y = random.nextInt(height + 100);  
33.             int xl = random.nextInt(10);  
34.             int yl = random.nextInt(12);  
35.             g.drawOval(x, y, x + xl, y + yl);  
36.         }  
37.         String code = request.getParameter("code");  
38.         String sRand = code;  
39.         for (int i = 0; i < sRand.length(); i++) {  
40.             String rand = sRand.substring(i, i + 1);  
41.             g.setColor(new Color(20 + random.nextInt(110), 20 + random  
42.                     .nextInt(110), 20 + random.nextInt(110)));  
43.             g.drawString(rand, 14 * i + 5, 25);  
44.         }  
45.         g.dispose();  
46.         javax.servlet.ServletOutputStream imageOut = response.getOutputStream();  
47.         JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(imageOut);  
48.         encoder.encode(image);  
49.     }  
50.     private Color getRandColor(int fc, int bc) {  
51.         Random random = new Random();  
52.         if (fc > 255)  
53.             fc = 255;  
54.         if (bc > 255)  
55.             bc = 255;  
56.         int r = fc + random.nextInt(bc - fc);  
57.         int g = fc + random.nextInt(bc - fc);  
58.         int b = fc + random.nextInt(bc - fc);  
59.         return new Color(r, g, b);  
60.     }  
61. }  

2.Web.xml檔案：

[html]  view plain  copy  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"  
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
5.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
6.     <display-name></display-name>  
7.     <welcome-file-list>  
8.         <welcome-file>index.jsp</welcome-file>  
9.     </welcome-file-list>  
10.     <servlet>  
11.         <servlet-name>CodeServlet</servlet-name>  
12.         <servlet-class>cn.gov.csrc.servlet.CodeServlet</servlet-class>  
13.     </servlet>  
14.     <servlet-mapping>  
15.         <servlet-name>CodeServlet</servlet-name>  
16.         <url-pattern>/CodeServlet</url-pattern>  
17.     </servlet-mapping>  
18. </web-app>  

3.index.jsp：

[javascript]  view plain  copy  

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
2. <%  
3.     String path = request.getContextPath();  
4.     String basePath = request.getScheme() + "://"  
5.             + request.getServerName() + ":" + request.getServerPort()  
6.             + path + "/";  
7. %>  
8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
9. <html>  
10. <head>  
11. <base href="<%=basePath%>">  
12. <title>驗證碼測試</title>  
13. <meta http-equiv="pragma" content="no-cache">  
14. <meta http-equiv="cache-control" content="no-cache">  
15. <meta http-equiv="expires" content="0">  
16. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
17. <meta http-equiv="description" content="This is my page">  
18. <script language="javascript" type="text/javascript">  
19. var code ; //在全局 定義驗證碼   
20. function createCode(){    
21.     code = "";    
22.     var codeLength = 5;//驗證碼的長度    
23.     //所有候選組成驗證碼的字元，可以用中文    
24.     var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C',  
25.             'D','E','F','G','H','I','J','K','L','M','N','O','P',  
26.             'Q','R','S','T','U','V','W','X','Y','Z','a','b','c',  
27.             'd','e','f','g','h','i','j','k','l','m','n','o','p',  
28.             'q','r','s','t','u','v','w','x','y','z');    
29.     for(var i=0;i<codeLength;i++){    
30.         var charIndex = Math.floor(Math.random()*60);    
31.         code +=selectChar[charIndex];    
32.     }    
33.     return code;    
34. }    
35. function validate (){    
36.     var inputCode = document.getElementById("vcode").value.toLowerCase();    
37.     if(inputCode.length <=0){    
38.         alert("請輸入驗證碼！");    
39.         return false;    
40.     }    
41.     else if(inputCode != code.toLowerCase()){    
42.         alert("驗證碼輸入錯誤！");    
43.         show();//重新整理驗證碼    
44.         return false;    
45.     }else{    
46.         alert("^-^ OK");    
47.         return true;    
48.     }    
49. }    
50. function show(){    
51.         //顯示驗證碼    
52.         document.getElementById("code").src="CodeServlet?code="+createCode();    
53. }    
54. window.onload = function() {  
55.         //document.οnlοad=show();    
56.         show();//頁面加載時加載驗證碼    
57.         //這時無論在ie還是在firefox中，js沒有加載完，頁面的東西是不會被執行的；    
58.     }    
59. </script>  
60. </head>  
61. <body>  
62.     <form οnsubmit="return validate();" action="" method="post">  
63.         <h3>jsp+js+servlet實作驗證碼</h3>  
64.         <br /> 使用者名：<input type="text" name="" /><br /> 請輸入驗證碼： <input  
65.             type="text" id="vcode" style="width: 60;" maxLength="5" /> <img  
66.             src="" id="code" /> <a href="#" mce_href="#"  
67.             οnclick="javascript:show();return false;">看不清,換一張!</a><br /> <input  
68.             type="submit" />  
69.     </form>  
70. </body>  
71. </html>  

下載下傳代碼請通路：http://www.zuidaima.com/share/1720368578202624.htm