jsp页面动态生成验证码

本文介绍了一种在JSP页面中实现动态验证码的方法。通过Servlet生成包含随机字符的图片作为验证码,用户点击图片即可刷新验证码。具体实现包括在后台绘制验证码图片、设置图片输出格式及前端页面交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

该文章主要实现的功能是在jsp页面中动态显示验证码,点击验证码能够实现验证码的刷新。

验证码在前台显示的为一张图片,而该图片是通过后台Servlet生成的,原理为:用Graphics画出一张图片,输入BufferedImage图片缓冲区中,然后通过ImageIO流输出出来。前台标签为<img/>标签,img的src属性指向Servlet,并通过img标签的onclick事件调用Servlet,实现验证码图片的刷新。

点击刷新后:

jsp页面代码为:

<tr>
	<td>
		验证码:
	</td>
	<td>
		<input type="text" name="validate" size="5" class="text" onBlur="checkCode()"/>
		   
		<img class="code" alt="点击刷新" src="code" onclick="this.src='code?s='+new Date().getTime();" >
	</td>
	<td>
		<div id="checkCode" class="check">*</div>
	</td>
</tr>

CodeServlet代码为:

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.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 生成验证码的类
 * @author guduchina
 */
@SuppressWarnings("serial")
public class CodeServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("image/JPEG");
		ServletOutputStream out = response.getOutputStream();
		// 定义图片的高度和宽度
		int width = 80;
		int height = 25;
		// 定义随机数对象
		Random ran = new Random();
		// 定义图片缓冲区,使用RGB模式输出图片
		BufferedImage image = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_RGB);
		// 定义画笔工具对象
		Graphics graphics = image.getGraphics();
		// 设置验证码框的背景颜色
		graphics.setColor(new Color(200, 200, 200));
		// 填充整个矩形
		graphics.fillRect(0, 0, width, height);
		// 定义要显示的验证码
		StringBuffer sb = new StringBuffer("");
		// 定义验证码数组
		String[] code = { "A", "a", "B", "b", "C", "c", "D", "d", "E", "e",
				"F", "f", "G", "g", "H", "h", "I", "i", "J", "j", "K", "k",
				"L", "l", "M", "m", "N", "n", "O", "o", "P", "p", "Q", "q",
				"R", "r", "S", "s", "T", "t", "U", "u", "V", "v", "W", "w",
				"X", "x", "Y", "y", "Z", "z", "0", "1", "2", "3", "4", "5",
				"6", "7", "8", "9", "0", "1", "2", "3", "4", "5", "6", "7",
				"8", "9", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
				"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "1",
				"2", "3", "4", "5", "6", "7", "8", "9", "0", "1" };
		for (int i = 0; i < 4; i++) {
			String str = code[ran.nextInt(code.length)];
			// 设置颜色
			graphics.setColor(new Color(ran.nextInt(150), ran.nextInt(150), ran
					.nextInt(150)));
			// 设置字体
			graphics.setFont(new Font("宋体", Font.BOLD, 20));
			// 绘制验证码
			graphics.drawString(str, 20 * i+4, 20 - ran.nextInt(5));
			sb.append(str);
		}
		// 随机产生100个干扰点
		for (int i = 0; i < 100; i++) {
			// 随机生成干扰点的坐标
			int x = ran.nextInt(width);
			int y = ran.nextInt(height);
			// 随机生成干扰点的颜色
			graphics.setColor(new Color(ran.nextInt(185) + 40,
					ran.nextInt(185) + 40, ran.nextInt(185) + 40));
			// 设置干扰点的位置长宽
			graphics.drawOval(x, y, 1, 1);
		}
		String codeInfo = sb.toString();
		// 将验证码的值放到session中,以供前台进行验证
		request.getSession().setAttribute("code", codeInfo);
		// 将Image通过out输出为jpeg格式的图片
		ImageIO.write(image, "JPEG", out);
		out.flush();
		out.close();
	}

}

然后就是web.xml配置代码:

<servlet>
    <servlet-name>CodeServlet</servlet-name>
    <servlet-class>com.niit.cpw.servlet.CodeServlet</servlet-class>
  </servlet>

<servlet-mapping>
    <servlet-name>CodeServlet</servlet-name>
    <url-pattern>/code</url-pattern>
  </servlet-mapping>

这篇文章写的是生成验证码的,还有一篇文章写的是用jQuery+Ajax+Servlet进行验证验证码是否正确,有兴趣的朋友可以看看。


评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值