今天在调试项目的时候发现，在提交表单的时候的验证码有问题，问题是这样的：就是通过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 onsubmit="return validate();"……/>

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

下面直接附上我的例子：

截图如下：

代码如下：

1.JAVA类：CodeServlet.java:

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

import java.awt.Color;


import java.awt.Font;


import java.awt.Graphics;


import java.awt.image.BufferedImage;


import java.io.IOException;


import java.util.Random;

import javax.servlet.ServletException;


import javax.servlet.http.HttpServlet;


import javax.servlet.http.HttpServletRequest;


import javax.servlet.http.HttpServletResponse;

import com.sun.image.codec.jpeg.JPEGCodec;


import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class CodeServlet extends HttpServlet {

/**

 * 产生验证码图片

 */

public void doGet(HttpServletRequest request, HttpServletResponse response)

		throws ServletException, IOException {

	response.setContentType("image/jpeg");

	response.setHeader("Cache-Control", "no-cache");

	response.setHeader("Pragma", "No-cache");

	response.setDateHeader("Expires", 0L);

	int width = 80;

	int height = 30;

	BufferedImage image = new BufferedImage(width, height, 1);

	Graphics g = image.getGraphics();

	Random random = new Random();

	g.setColor(getRandColor(200, 250));

	g.fillRect(0, 0, width, height);

	g.setFont(new Font("Arial", 0, 25));

	g.setColor(getRandColor(160, 200));

	for (int i = 0; i &lt; 155; i++) {

		int x = random.nextInt(width + 100);

		int y = random.nextInt(height + 100);

		int xl = random.nextInt(10);

		int yl = random.nextInt(12);

		g.drawOval(x, y, x + xl, y + yl);

	}

	String code = request.getParameter("code");

	String sRand = code;

	for (int i = 0; i &lt; sRand.length(); i++) {

		String rand = sRand.substring(i, i + 1);

		g.setColor(new Color(20 + random.nextInt(110), 20 + random

				.nextInt(110), 20 + random.nextInt(110)));

		g.drawString(rand, 14 * i + 5, 25);

	}

	g.dispose();

	javax.servlet.ServletOutputStream imageOut = response.getOutputStream();

	JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(imageOut);

	encoder.encode(image);

}

private Color getRandColor(int fc, int bc) {

	Random random = new Random();

	if (fc &gt; 255)

		fc = 255;

	if (bc &gt; 255)

		bc = 255;

	int r = fc + random.nextInt(bc - fc);

	int g = fc + random.nextInt(bc - fc);

	int b = fc + random.nextInt(bc - fc);

	return new Color(r, g, b);

}




}





2.Web.xml文件：




  1. <?xml version="1.0" encoding="UTF-8"?>
    2. 

  2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    3. 

  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4. 

  4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    5. 

  5. http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    6. 

  6. <display-name></display-name>
    7. 

  7. <welcome-file-list>
    8. 

  8. <welcome-file>index.jsp</welcome-file>
    9. 

  9. </welcome-file-list>
    10. 

  10. <servlet>
    11. 

  11. <servlet-name>CodeServlet</servlet-name>
    12. 

  12. <servlet-class>cn.gov.csrc.servlet.CodeServlet</servlet-class>
    13. 

  13. </servlet>
    14. 

  14. <servlet-mapping>
    15. 

  15. <servlet-name>CodeServlet</servlet-name>
    16. 

  16. <url-pattern>/CodeServlet</url-pattern>
    17. 

  17. </servlet-mapping>
    18. 

  18. </web-app>




<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"

	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<display-name></display-name>

	<welcome-file-list>

		<welcome-file>index.jsp</welcome-file>

	</welcome-file-list>

	<servlet>

		<servlet-name>CodeServlet</servlet-name>

		<servlet-class>cn.gov.csrc.servlet.CodeServlet</servlet-class>

	</servlet>

	<servlet-mapping>

		<servlet-name>CodeServlet</servlet-name>

		<url-pattern>/CodeServlet</url-pattern>

	</servlet-mapping>

</web-app>



3.index.jsp：




  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    2. 

  2. <%
    3. 

  3. String path = request.getContextPath();
    4. 

  4. String basePath = request.getScheme() + "://"
    5. 

  5. + request.getServerName() + ":" + request.getServerPort()
    6. 

  6. + path + "/";
    7. 

  7. %>
    8. 

  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    9. 

  9. <html>
    10. 

  10. <head>
    11. 

  11. <base href="<%=basePath%>">
    12. 

  12. <title>验证码测试</title>
    13. 

  13. <meta http-equiv="pragma" content="no-cache">
    14. 

  14. <meta http-equiv="cache-control" content="no-cache">
    15. 

  15. <meta http-equiv="expires" content="0">
    16. 

  16. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    17. 

  17. <meta http-equiv="description" content="This is my page">
    18. 

  18. <script language="javascript" type="text/javascript">
    19. 

  19. var code ; //在全局 定义验证码
    20. 

  20. function createCode(){
    21. 

  21. code = "";
    22. 

  22. var codeLength = 5;//验证码的长度
    23. 

  23. //所有候选组成验证码的字符，可以用中文
    24. 

  24. var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C',
    25. 

  25. 'D','E','F','G','H','I','J','K','L','M','N','O','P',
    26. 

  26. 'Q','R','S','T','U','V','W','X','Y','Z','a','b','c',
    27. 

  27. 'd','e','f','g','h','i','j','k','l','m','n','o','p',
    28. 

  28. 'q','r','s','t','u','v','w','x','y','z');
    29. 

  29. for(var i=0;i<codeLength;i++){
    30. 

  30. var charIndex = Math.floor(Math.random()*60);
    31. 

  31. code +=selectChar[charIndex];
    32. 

  32. }
    33. 

  33. return code;
    34. 

  34. }
    35. 

  35. function validate (){
    36. 

  36. var inputCode = document.getElementById("vcode").value.toLowerCase();
    37. 

  37. if(inputCode.length <=0){
    38. 

  38. alert("请输入验证码！");
    39. 

  39. return false;
    40. 

  40. }
    41. 

  41. else if(inputCode != code.toLowerCase()){
    42. 

  42. alert("验证码输入错误！");
    43. 

  43. show();//刷新验证码
    44. 

  44. return false;
    45. 

  45. }else{
    46. 

  46. alert("^-^ OK");
    47. 

  47. return true;
    48. 

  48. }
    49. 

  49. }
    50. 

  50. function show(){
    51. 

  51. //显示验证码
    52. 

  52. document.getElementById("code").src="CodeServlet?code="+createCode();
    53. 

  53. }
    54. 

  54. window.onload = function() {
    55. 

  55. //document.onload=show();
    56. 

  56. show();//页面加载时加载验证码
    57. 

  57. //这时无论在ie还是在firefox中，js没有加载完，页面的东西是不会被执行的；
    58. 

  58. }
    59. 

  59. </script>
    60. 

  60. </head>
    61. 

  61. <body>
    62. 

  62. <form onsubmit="return validate();" action="" method="post">
    63. 

  63. <h3>jsp+js+servlet实现验证码</h3>
    64. 

  64. <br /> 用户名：<input type="text" name="" /><br /> 请输入验证码： <input
    65. 

  65. type="text" id="vcode" style="width: 60;" maxLength="5" /> <img
    66. 

  66. src="" id="code" /> <a href="#" mce_href="#"
    67. 

  67. onclick="javascript:show();return false;">看不清,换一张!</a><br /> <input
    68. 

  68. type="submit" />
    69. 

  69. </form>
    70. 

  70. </body>
    71. 

  71. </html>




<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

	String path = request.getContextPath();

	String basePath = request.getScheme() + "://"

			+ request.getServerName() + ":" + request.getServerPort()

			+ path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>验证码测试</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<script language="javascript" type="text/javascript">

var code ; //在全局 定义验证码

function createCode(){

    code = "";

    var codeLength = 5;//验证码的长度

    //所有候选组成验证码的字符，可以用中文

    var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C',

    		'D','E','F','G','H','I','J','K','L','M','N','O','P',

    		'Q','R','S','T','U','V','W','X','Y','Z','a','b','c',

    		'd','e','f','g','h','i','j','k','l','m','n','o','p',

    		'q','r','s','t','u','v','w','x','y','z');

    for(var i=0;i<codeLength;i++){

        var charIndex = Math.floor(Math.random()*60);

        code +=selectChar[charIndex];

    }

    return code;

}

function validate (){

    var inputCode = document.getElementById("vcode").value.toLowerCase();

    if(inputCode.length <=0){

        alert("请输入验证码！");

        return false;

    }

    else if(inputCode != code.toLowerCase()){

        alert("验证码输入错误！");

        show();//刷新验证码

        return false;

    }else{

        alert("^-^ OK");

        return true;

    }

}

function show(){

        //显示验证码

        document.getElementById("code").src="CodeServlet?code="+createCode();

}

window.onload = function() {

		//document.onload=show();

        show();//页面加载时加载验证码

        //这时无论在ie还是在firefox中，js没有加载完，页面的东西是不会被执行的；

    }

</script>

</head>

<body>


<form onsubmit="return validate();" action="" method="post">


<h3>jsp+js+servlet实现验证码</h3>


<br /> 用户名：<input type="text" name="" /><br /> 请输入验证码： <input


type="text" id="vcode" style="width: 60;" maxLength="5" /> <img


src="" id="code" /> <a href="#" mce_href="#"


onclick="javascript:show();return false;">看不清,换一张!</a><br /> <input


type="submit" />


</form>


</body>


</html>


												


											
jsp中生成的验证码和存在session里面的验证码不一致的处理的更多相关文章
	

    
								
  1. jsp中生成txt文件
		
    import jxl.Workbook; import jxl.write.Label; import jxl.write.WritableSheet; import jxl.write.Writab ...
    
		
    2. 
						
  2. JAVA WEB项目中生成验证码及验证实例（附源码及目录结构）
		
    [我是一个初学者,自己总结和网上搜索资料,代码是自己敲了一遍,亲测有效,现将所有的目录结构和代码贴出来分享给像我一样的初学者] 作用 验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计 ...
    
		
    3. 
						
  3. java中生成验证码，以及验证码的使用
		
    java中生成验证码,以及验证码的使用: 1:验证码生成工具类: import java.awt.Color; import java.awt.Font; import java.awt.Graphi ...
    
		
    4. 
						
  4. servlet中生成验证码
		
    在servlet中生成验证码 package login; import java.awt.Color; import java.awt.Graphics; import java.awt.image ...
    
		
    5. 
						
  5. 2017.11.27 用Servlet在JSP中加入验证码
		
    登陆界面 <%@ page pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
    
		
    6. 
						
  6. Django中生成随机验证码(pillow模块的使用)
		
    Django中生成随机验证码 1.html中a标签的设置 <img src="/get_validcode_img/" alt=""> 2.view ...
    
		
    7. 
						
  7. 对JSP中的Session 简单理解
		
    我的理解: 简单来说,要使用服务器端的session对象,就是要有其对应的key,即sessionid,它只认识sessionid. 下面我说的cookie,url重写或者隐藏表单,都是为了将其对应的 ...
    
		
    8. 
						
  8. 在ashx文件中制作验证码（使用session要继承IRequiresSessionState）
		
    必须继承System.Web.SessionState.IRequiresSessionState接口,才能实现Session读写! System.Web.SessionState的一些接口 IRea ...
    
		
    9. 
						
  9. JSP中Session的使用
		
    JSP session使用方法 <%@page contentType="text/html;charset=GB2312"%><html>  <he ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python mysql数据库中 json的存储
			
    首先数据库里的字段类型需要设置为json: 存储这个json时需要把这个json变为字符串,而且是最外层为单引号,内部字符串为双引号!如图:  所以python脚本中这个字段的字符串应该这样写: 得出 ...
    
			
    2. 
						
  2. 19-10-28-A
			
    竟然?竟然?竟然? 我已经用了半个键盘的编号了$\text{T_T}$ $\mathbb{AFO}$感稍强 h1是不是有点大? ZJ+TJ: T1 以为是什么数据结垢,但是是个链表. 所以可以使用 v ...
    
			
    3. 
						
  3. day70test
			
    day_70: #api / urls: from django.conf.urls import url from . import views urlpatterns = [ url(r'^car ...
    
			
    4. 
						
  4. 08-2-if的其他写法
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    5. 
						
  5. c# asp.net 修改webconfig文件 配置
			
    #region 修改config文件 /// <summary> /// 修改config文件(AppSetting节点) /// </summary> /// <par ...
    
			
    6. 
						
  6. vue-admin-template模板添加screenfull全屏插件
			
    先安装screenfull:npm install screenfull@4.2.0 --save    (注意版本号) 一.在\src\components目录下创建Screenfull文件夹,创建 ...
    
			
    7. 
						
  7. Tomcat--远程Debug以及参数配置调优
			
    本文会讲解Tomcat远程Debug调试,Tomcat-manager监控(简单带过),psi-probe监控和Tomcat参数调优.本文基于Tomcat8.5版本. Tomcat远程Debug: 远 ...
    
			
    8. 
						
  8. ajaxfileupload 上传使用demo
			
    1.添加js引用 <script src="JS/jquery-1.4.2.min.js" type="text/javascript"></ ...
    
			
    9. 
						
  9. utils02_使用github创建一个远程仓库
			
    1.注册github账号 https://github.com/ 2.第一次登陆需要创建一个仓库 3.在本地生成密钥和公钥 ssh-keygen -t rsa 会在当前用户下生成2个文件就是公钥和密钥 ...
    
			
    10. 
						
  10. hihocoder 1084 (哈希)
			
    题目链接 时间限制:4000ms 单点时限:4000ms 内存限制:256MB 描述 你知道KMP吗?它是用于判断一个字符串是否是另一个字符串的子串的算法.今天我们想去扩展它. 在信息理论中,在两个相 ...
    
			
    11.