一个验证码实现

一、准备工作：在JSP项目根目录下保存Number.jsp

<%@ page contentType="image/jpeg"
	import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"
	pageEncoding="utf-8"%>
<%!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 = 60, height = 20;
	BufferedImage image = new BufferedImage(width, height,
			BufferedImage.TYPE_INT_RGB);
	// 获取图形上下文  
	Graphics g = image.getGraphics();
	//生成随机类  
	Random random = new Random();
	// 设定背景色  
	g.setColor(getRandColor(200, 250));
	g.fillRect(0, 0, width, height);
	//设定字体  
	g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
	//画边框  
	//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 sRand = "";
	for (int i = 0; i < 4; i++) {
		String rand = String.valueOf(random.nextInt(10));
		sRand += rand;
		// 将认证码显示到图象中  
		g.setColor(new Color(20 + random.nextInt(110), 20 + random
				.nextInt(110), 20 + random.nextInt(110)));//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成  
		g.drawString(rand, 13 * i + 6, 16);
	}
	// 将认证码存入SESSION  
	session.setAttribute("numrand", sRand);
	// 图象生效  
	g.dispose();  
	// 输出图象到页面  
	ImageIO.write(image, "JPEG", response.getOutputStream());  
	out.clear();  
	out = pageContext.pushBody();   
%>

二、在登录框加入验证码提示词、输入框、图片显示区域

<label>验证码</label><input style="margin-left: 3px; width: 60px"
					type="text" id="ma" name="ma" /> 
					<img src="Number.jsp"
					alt="验证码" name="checkImg" id="checkImg"
					style="position: relative; top: 3px; left: 3px;"
					onclick="changeImg();" />

三、在头部加入JavaScript方法onclick()事件

<script>
function changeImg(){
			//获取页面验证码图片元素
			var checkImg=document.getElementById("checkImg");
	//给验证码图片元素重新设置src属性值的第一种写法		checkImg.setAttribute("src","Number.jsp?"+Math.random());
//	//给验证码图片元素重新设置src属性值的第二种写法	
			checkImg.src="Number.jsp?"+Math.random();
		}
</script>