今天在调试项目的时候发现，在提交表单的时候的验证码有问题，问题是这样的：就是通过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. 廖雪峰Java11多线程编程-3高级concurrent包-4Concurrent集合
			
    Concurrent 用ReentrantLock+Condition实现Blocking Queue. Blocking Queue:当一个线程调用getTask()时,该方法内部可能让给线程进入等 ...
    
			
    2. 
						
  2. 线段树动态开点——cf1045G
			
    只计算半径小的能看到的半径大的,因为如果计算半径大的看到半径小的,虽然q在其范围内,但是小的不一定能看到大的 那么我们将机器人按照半径降序排序 遍历一次,去查询在[x-r,x+r]范围的,智商在[q- ...
    
			
    3. 
						
  3. Config程序配置文件（configSections）操作实践及代码详注
			
    所有与配置文件相关的类:(粗体为一般情况下使用到的类,其它类功能可能在很复杂的情况下才使用到.) 1.ConfigurationManager,这个提供用于打开客户端应用程序集的Configurati ...
    
			
    4. 
						
  4. LUOGU P1337 [JSOI2004]平衡点 / 吊打XXX(模拟退火)
			
    传送门 解题思路 学习了一下玄学算法--模拟退火,首先要求平衡处,也就是求势能最小的地方,就是求这个点到所有点的距离*重量最小.剩下的几乎是模拟退火的板子了. #include<iostream ...
    
			
    5. 
						
  5. jquery ajax 放在重复点击事件beforeSend方法
			
    防止重复数据在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数 ...
    
			
    6. 
						
  6. 新书《iOS应用逆向工程：分析与实战》
			
    前无古人!小白福音!国内第一本iOS应用逆向工程类图书<iOS应用逆向工程:分析与实战>就要空降啦~! 你是否曾因应用上线的第一天即遭破解而无奈苦恼,想要加以防范,却又束手无策? 你是否曾 ...
    
			
    7. 
						
  7. 懒散惯了，该收收心了，两天了，封装了一个R0下注册表类
			
    写得乱七八糟.   看着自己写的代码,感觉都不像自己了.   我写的代码,风格这么差了么?思路这么乱了么?   我写代码这么累么?   不像以前的我了...   这段时间,太懒散了...   该继续努 ...
    
			
    8. 
						
  8. js for in 和 for of 的区别
			
    引自:http://es6.ruanyifeng.com/#docs/iterator for...of循环可以代替数组实例的forEach方法. const arr = ['red', 'green ...
    
			
    9. 
						
  9. myeclipse工程更新后java图标变为空心的解决办法
			
    今天用svn更新了工程发现目录结构改变了,同时所有的java文件的图标变成了空心的.解决办法如下 1.右键单击工程目录名,选择properties. 2.选择java bulid path,正常的应该 ...
    
			
    10. 
						
  10. hue mysql连接不上数据库排查
			
    由于CDH所有的组件都会进行agent检测,所以先到/var/log/cloudera-scm-agent(mysql所在节点进行日志排查),可以发现每次连接会产生一个log路径作为记录hue连接my ...
    
			
    11.