jsp 验证码 不用session更方便(转载:主要是思想)

网上看了很多jsp实现验证码的例子

大多数实现思路是：

1.在一个java(继承了HttpServlet)类 里面生成验证码，把验证码放到session里(验证用户输入的验证码是否正确时取出)

 

2.根据生成的验证码画出一个有干扰线或干扰点的图片

 

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

 

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

 

5.验证的时候提交数据，在本页面或另外一个servlet或者另外一个页面取出 session里存放的验证码，来验证用户的输入

 

这样做的话，用户就会因为验证码输入错误 而重新输入大量的 需要提交的 注册信息或其他信息，效率不高，不适用

 

不这样的话，加载jsp页面时 提前取session里的验证码放到页面

---------------------------------------------------------------------------------------------------

  jsp:String code=(String)session.getAttribute("code");

  html:<input type="hide" value="<%=code%>" id="scode">:方便通过js验证

---------------------------------------------------------------------------------------------------

却不可行,第一次执行时取出的cde==null，和我们预期的不一样，更不用说验证了

经过n次baidu,google得知应该是因为加载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;很重要啊

 

 

 

不多说了，代码示意如下，希望能对和我一样遇到过这方面问题的有所帮助

java类 CodeServlet

 

package com.zou.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 javax.servlet.http.HttpSession;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
@SuppressWarnings("serial")
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);
        //HttpSession session = request.getSession(true);
        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 < 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");
        //System.out.println(code);
        String sRand=code;
        for (int i = 0; i < sRand.length(); i++) {
            //String rand = getRandChar(random.nextInt(36));
            String rand = sRand.substring(i, i+1);
            //sRand = sRand + rand;
            g.setColor(new Color(20 + random.nextInt(110), 20 + random
                    .nextInt(110), 20 + random.nextInt(110)));
            g.drawString(rand, 14 * i + 5, 25);
        }
        //session.setAttribute("rand", sRand);
        //request.setAttribute("rand", sRand);
        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 > 255)
            fc = 255;
        if (bc > 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);
    }

/*  private String getRandChar(int randNumber) {
        return CHARARRAY[randNumber];
    }*/
    //private static final String CONTENT_TYPE = "image/jpeg";
/*  private static final String CHARARRAY[] = { "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" };*/
    }

 

web.xml

 

<?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">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
    <servlet>
        <servlet-name>code</servlet-name>
        <servlet-class>com.zou.servlet.CodeServlet</servlet-class>
    </servlet>
  <servlet-mapping>
    <servlet-name>code</servlet-name>
    <url-pattern>/codeServlet</url-pattern>
  </servlet-mapping>
</web-app>

 

index.jsp

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>验证码测试</title>
<mce: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没有加载完，页面的东西是不会被执行的；
    }

// --></mce: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>

 

评论

1 楼 sxdtzhaoxinguo 2014-03-03  

很不错，我今天就遇到了楼主的问题，看了楼主的博客现在明白了，谢谢！