如何在登录页面生成验证码图像，并点击后刷新验证码

    这两天在学习java web时，做一个练习题上要求自己实现一个登录验证，要求在登录页面输入用户名、密码还有验证码，提交后再后台进行验证。如果输入全部正确，则跳转页面进入系统，如果错误则提示重新输入。登录页面比较好做，就是JSP页面并使用表单，主要是验证码图像的生成和刷新，有难度。验证码图像生产的代码如下：

image.jsp

<%-- 显示验证码提示 --%>
<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="GBK"%>
<%!
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);
    }
%>
<%
//设置页面不缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);

// 在内存中创建图象
// 通过这里可以修改图片大小
int width = 80, height = 25;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

// 获取图形上下文
// g相当于笔
Graphics g = image.getGraphics();

//生成随机类
Random random = new Random();

// 设定背景色
g.setColor(getRandColor(200,250));
// 画一个实心的长方，作为背景
g.fillRect(0, 0, width, height);

//设定字体
g.setFont(new Font("宋体", Font.PLAIN,20));

//画边框
//g.setColor(new Color());
//g.drawRect(0, 0, width-1, height-1);

// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160,200));
for (int i = 0; i < 155; i++) {
    int x = random.nextInt(width);
    int y = random.nextInt(height);
    int xl = random.nextInt(12);
    int yl = random.nextInt(12);
    g.drawLine(x, y, x + xl, y + yl);
}

// 取随机产生的认证码(4位数字)
//String rand = request.getParameter("rand");
//rand = rand.substring(0,rand.indexOf("."));
String sRand="";
// 如果要使用中文，必须定义字库，可以使用数组进行定义
// 这里直接写中文会出乱码，必须将中文转换为unicode编码
String[] str = {"A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","m","n","p","s","t","u","v","w","x","y","z","1","2","3","4","5","6","7","8","9"} ;

for (int i = 0; i < 4; i++){
    String rand = str[random.nextInt(str.length)];
    sRand += rand;
    // 将认证码显示到图象中
    g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20+random.nextInt(110)));//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
    g.drawString(rand, 16 * i + 6, 19);
}

// 将认证码存入SESSION
session.setAttribute("rand", sRand);

// 图象生效
g.dispose();

// 输出图象到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
out.clear();
out = pageContext.pushBody();
%> 

    以上是生成验证码图像的通用代码，然后在登录页面中使用<img src="request.getContextPath()/image.jsp">标签即可显示验证码图像。接下来就是如何在点击验证码（或文字“换一个”）时刷新验证码内容，也就是重新调用image.jsp页面。如果是重复给img.src属性赋值"this.getContextPath()/image.jsp"是不行的。后来在网上查了下才知道，方法很简单，就是给img.src属性重复赋值时传入一个参数，传什么都可以，字符串或数字都行。我们可以传入一个随机数Math.random()。先定义js函数：

<script language="javascript">

    function renovate(img) {

        img.src = img.src + "?" + Math.random();    // 传入参数时，可以不定义参数名称

    }

</script>

然后加入onClick事件，<img src="this.getContextPath()/image.jsp" onClick="renovate(this)">，这样在点击验证码时，就可以实现刷新验证码内容的目的。我们也可以在验证码旁边定义一个“看不清，换一个”的超链接，给超链接添加onClick事件，当点击超链接时调用js函数，刷新验证码，具体方法和上面是一样的。