JSP验证码与session不一致处理方法

怼烎@ 2022-09-30 13:52 130阅读 0赞

今天在调试项目的时候发现，在提交表单的时候的验证码有问题，问题是这样的：就是通过debug模式查看得知：jsp页面生成的验证码和表单输入的页面输入的一样，但是到后台执行的时候，你会发现他们是不一样的，现在上图看看：

1.这是表单提交的时候:

![SouthEast][]

2.这是后台得到的生成的验证码：

![SouthEast 1][]

3.这是后台得到输入的验证码：

![SouthEast 2][]

这样的问题还是头一次出现，以前没遇到过，经过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.提交数据之前验证

局部刷新验证码：<a href="\#" οnclick="[JavaScript][]:show();return false;">看不清,换一张！</a>-----return false;很重要啊

下面直接附上我的例子：

截图如下：

![SouthEast 3][]

代码如下：

1.JAVA类：CodeServlet.java:

**\[java\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

2.Web.xml文件：

**\[html\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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.   
62. <body>  
63.     <form οnsubmit="return validate();" action="" method="post">  
64.         <h3>jsp+js+servlet实现验证码</h3>  
65.         <br /> 用户名：<input type="text" name="" /><br /> 请输入验证码： <input  
66.             type="text" id="vcode" style="width: 60;" maxLength="5" /> <img  
67.             src="" id="code" /> <a href="\#" mce\_href="\#"  
68.             οnclick="javascript:show();return false;">看不清,换一张!</a><br /> <input  
69.             type="submit" />  
70.     </form>  
71. </body>  
72. </html>

下载代码请访问：http://www.zuidaima.com/share/1720368578202624.htm

[SouthEast]: /images/20220705/be312142c9f143f4a003a4b0c30506cb.png
[SouthEast 1]: /images/20220705/7921da3a48f747e7ad923c558dc0aedb.png
[SouthEast 2]: /images/20220705/225f56a738e54b78a9a509645f8f0bf0.png
[Java]: http://lib.csdn.net/base/javase
[JavaScript]: http://lib.csdn.net/base/javascript
[SouthEast 3]: /images/20220705/ce359542d74a419a92c8ab37ca372b10.png
[view plain]: http://blog.csdn.net/sxdtzhaoxinguo/article/details/20383495#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/215036
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/215036/fork