关于JSP页面的验证码简单实现

验证码功能一直以来是各种网站和APP使用的一种重要功能。实现的策略和方法也各种各样，大部分是调用java.awt下的包进行画图，现在分享本人长期使用的一个验证码功能实现，希望对初学者的学习会有帮助。

1、code.jsp(实现验证码生成)

<%@ page
import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"%>
<%@ page import="java.io.OutputStream"%>
<%@ page 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);
}%>
<%
try {
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
int width = 85, height = 20;
//画图，获得画图区域的宽度和高度（具体的理论不再详细阐述，网上搜验证码实现一大堆= =）
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
OutputStream os = response.getOutputStream();
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, 20));
g.setColor(getRandColor(120, 200));
for (int i = 0; i < 155; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(5);
int yl = random.nextInt(5);
g.drawLine(x, y, x + xl, y + yl);
}
String sRand = "";
for (int i = 0; i < 5; i++) {
String chose = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
String rand = String.valueOf(chose.charAt(random
.nextInt(chose.length())));
sRand += rand;
g.setColor(new Color(20 + random.nextInt(110), 20 + random
.nextInt(110), 20 + random.nextInt(110)));
g.drawString(rand, 15 * i + 6, 16);
}
session.setAttribute("code", sRand);
g.dispose();

ImageIO.write(image, "JPEG", os);
os.flush();
os.close();
os = null;
response.flushBuffer();
out.clear();
out = pageContext.pushBody();
} catch (IllegalStateException e) {
System.out.println(e.getMessage());
e.printStackTrace();
}
%>

 2、login.jsp(部分实现代码)

js部分

<script type="text/javascript">
function reload() {
document.getElementById("code").setAttribute("src",
"code.jsp?a=" + new Date().getTime());
}
function correctPNG() {
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters)) {
for ( var j = 0; j < document.images.length; j++) {
var img = document.images[j]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className
+ "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' "
: "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left")
imgStyle = "float:left;" + imgStyle
if (img.align == "right")
imgStyle = "float:right;" + imgStyle
if (img.parentElement.href)
imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span "
+ imgID
+ imgClass
+ imgTitle
+ " style=\""
+ "width:"
+ img.width
+ "px; height:"
+ img.height
+ "px;"
+ imgStyle
+ ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src
+ "\', sizingMethod='scale');\">__tag_40$67_"
img.outerHTML = strNewHTML
j = j - 1
}
}
}
}
window.attachEvent("onload", correctPNG);

 表单部分

<tr>
<td>
验证码:
</td>
<td>
<INPUT
style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
type=text maxLength=10 size=10 name="validateCode" />
<img id="code" style="CURSOR: pointer" onclick=
reload();;;
src="code.jsp" alt="点击刷新验证码">
</td>
</tr>

 实现后效果