一些实用技术的整理之一：验证码功能的实现

最新推荐文章于 2024-06-27 08:00:00 发布

吃货陈

最新推荐文章于 2024-06-27 08:00:00 发布

阅读量745

点赞数

分类专栏： JAVA EE的学习文章标签：验证码 javascript eclipse

本文链接：https://blog.csdn.net/chenshuo8725/article/details/23425897

版权

JAVA EE的学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

验证码就是每次访问页面时随机生成的一张图片，里面的内容一般是数字、字母或表达式的随机组合，这个东西蛮有用的，而且也是基本技能之一，所以要把代码贴出来，以留备用~~

校验码有两个比较重要的类：Graphics类和BufferedImage类，详细内容参见API手册~~

以数字校验的实现来吧，下面具体上图~~

新建一个名为JSP_Verify的Dynamic WEB工程，具体的工程目录如下：

其中：image.jsp用于生成随机数字校验码；login.jsp为登录页面；validate.jsp为验证页面了

然后具体实现吧，上代码~~

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript">
	function loadimage(){
		document.getElementById("randImage").src = "image.jsp?"
				+ Math.random();
	}
</script>
<title>用户登录</title>
</head>
<body>
	<table width="256" border="0" cellpadding="0" cellspacing="0">
	<!-- DWLayoutTable -->
	<form action="validate.jsp" method="post" name="loginForm">
		<tr>
			<td width="118" height="22" valign="middle" align="center">
				<input type="text" name="rand" size="15">
			</td>
			<td width="138" valign="middle" align="center">
				<img alt="code..." src="randImage" id="randImage"
				 src="image.jsp" width="60" height="20"
				 border="1" align="absmiddle">
			</td>
		</tr>
		<tr>
			<td height="36" colspan="2" align="center" valign="middle">
				<a href="javascript:loadimage();">
					<font class=pt95>看不清楚点我</font>
				</a>
			</td>
		</tr>
		<tr>
			<td height="36" colspan="2" align="center" valign="middle">
				<input type="submit" name="login" value="提交">
		</tr>
	</form>
	</table>
</body>
</html>

image.jsp的具体代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
    
<%@ page import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%@ page import="java.io.OutputStream" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>验证码生成</title>
</head>
<%!
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 = 60, height = 20;
	//建立BufferImage对象。指定图片的长度宽度色彩
	BufferedImage image = new BufferedImage(width, height, 
			BufferedImage.TYPE_INT_RGB);
	OutputStream os = response.getOutputStream();
	//取得Graphics对象，用来绘制图像
	Graphics g = image.getGraphics();
	//绘制图片背景和文字，释放Graphics对象所占用的资源
	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(getRandColor(160, 200));
	
	for (int i=0; i<155; i++) {
		int x = random.nextInt(width);
		int y = random.nextInt(height);
		int x1 = random.nextInt(12);
		int y1 = random.nextInt(12);
		g.drawLine(x, y, x+x1, y+y1);
	}
	
	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.setAttribute("rand", sRand);
	g.dispose();
	//通过ImageIO对象的write静态方法将图片输出
	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();
}

%>

<body>

</body>
</html>

validate.jsp的具体代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>验证页面</title>
</head>
<body>
<% 
String rand = (String)session.getAttribute("rand"); 
String input = request.getParameter("rand"); 
if(rand.equals(input)){ 
out.print("<script>alert('验证通过！');</script>"); 
} else{ 
out.print("<script>alert('请输入正确的验证码！');location.href='login.jsp';</script>"); 
} 
%> 
</body>
</html>

然后进login.jsp的代码页面跑跑试试看，错的和对的都试试，如果都行，就OK了~~

第一张是输入正确的校验码：