手把手教你实现验证码功能

前言

不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。所谓验证码，就是将一串随机产生的数字或符号，生成一幅图片，图片里加上一些干扰象素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。

实现方式

1）手写验证码

/**
 * 第一种生成验证码的方式
 */
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//声明两个变量存验证码的宽高
		int width=120;
		int height=40;
		
		//创建内存图像对象
		BufferedImage bimg=new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		
		//获得图像的画笔
		 Graphics gp=bimg.getGraphics();
		 //设置画笔颜色
		 gp.setColor(Color.blue);
		 //填充图像的背景颜色
		 gp.fillRect(0, 0, width, height);
		 
		 
		 //设置画笔颜色
		 gp.setColor(Color.YELLOW);
		 //设置画笔的字体
		 gp.setFont(new Font("宋体", Font.BOLD, 30));
		 //声明一个数组存可能作为验证码的字符
		 String[] s1= {"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e"};
		 //声明字符串存验证码
		 StringBuffer sb=new StringBuffer();
		 //循环生成四个验证码
		 for (int i = 0; i <4; i++) {
			int index=(int)(Math.random()*s1.length);
			//生成的验证码字母为
			String code1=s1[index];
			//将生成的验证码写入到图像上
			gp.drawString(code1, i*20+10, 30);
			//将每次生成的字母存到sb中
			sb.append(code1);
		}

		 //存储生成的验证码，用于登录时做校验
		 request.getSession().setAttribute("checkcode", sb);
		 
		 //在图像画干扰线
		//设置画笔颜色
		 gp.setColor(Color.red);
		 for (int i = 0; i < 10; i++) {
			gp.drawLine((int)(Math.random()*width), (int)(Math.random()*height), (int)(Math.random()*width), (int)(Math.random()*height));
		}
		 //将生成的验证写到客户端
		 ImageIO.write(bimg, "jpg", response.getOutputStream());
	}

2）验证码工具类

——ValidateCode.jar

/**
 * 第二种生成验证码的方式
 */
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//声明变量存储验证码宽度，高度，验证码的字母个数，验证码的干扰线的条数
		int width=120;
		int height=40;
		int count=4;
		int lineCount=20;
		//创建验证码对象
		ValidateCode vc=new ValidateCode(width, height, count, lineCount);
		//获取验证码
		String code1=vc.getCode();
		//System.out.println("生成的验证码："+code1);
		//将生成的验证码存到Session会话
		request.getSession().setAttribute("checkcode", code1);
		
		//将生成的验证码返回给客户端
		vc.write(response.getOutputStream());
	}
}

页面主要代码

<script type="text/javascript">
	function changeImg() {
		// 时间戳   // 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
		document.getElementById("imgObj").src="CheckCodeServlet?r="+new Date();
	}
</script>

<form action="${pageContext.request.contextPath}/checkCode" method="post">
请输入验证码：<input type="text" name="code" style="width: 80px;" />
<img id="imgObj" alt="验证码" src="${pageContext.request.contextPath}/checkCodeServlet"><a href="#" onclick="changeImg()">换一张</a><br/>
<input type="submit" value="提交" />
</form>

效果图

1、手写效果

2、工具类效果

不喜勿喷！！！感兴趣的朋友可以试试，有疑问的欢迎在下方评论。