简易的网页验证码
Posted OverZeal
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易的网页验证码相关的知识，希望对你有一定的参考价值。
通过使用Java图形界面设计（AWT）来绘制一个简易的验证码，效果如下：
整体的效果很low，较为现代的网页界面估计不会使用，但作为后台管理界面所需还可以的，在这里还是进行个记录，以备不时之需
第一步：构建验证码
<%@ page language="java" import="java.util.*,java.awt.*" pageEncoding="UTF-8"%> <%@ page import="javax.imageio.*"%> <%@ page import="java.awt.image.*" %> <!-- 验证码 --> <html> <head> <title>网上书店</title> </head> <body> <% response.setHeader("Cache-Control","no-cache"); //内存中创建图像 int width=60,height=20; BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //获取画笔 Graphics g=image.getGraphics(); //设定背景色,并填充整个图像区(创建画布) g.setColor(new Color(200,200,200)); g.fillRect(0,0,width,height); //随机数 Random rnd=new Random(); int randNum=rnd.nextInt(8999)+1000; String randStr=String.valueOf(randNum); //将验证码存入session session.setAttribute("randStr",randStr); //将验证码显示在画布 g.setColor(Color.black); g.setFont(new Font("",Font.PLAIN,20)); g.drawString(randStr,10,17); //生成100个干扰点（就是图片上的噪点） for(int i=0;i<100;i++){ int x=rnd.nextInt(width); int y=rnd.nextInt(height); g.drawOval(x,y,1,1); } //输出图像 ImageIO.write(image,"JPEG",response.getOutputStream()); out.clear(); out=pageContext.pushBody(); %> </body> </html>
这个JSP页面，名叫code.jsp,其中嵌入的Java代码就是验证码的实现方法。值得注意的有：
int width=60,height=20; BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
其中width，height分别设置外部范围的宽和高，也就是灰色区域的宽和高，BufferedImage.TYPE_INT_RGB设置这个区域是由RGB三色构成，值为int型
//设定背景色 g.setColor(new Color(200,200,200));
在这里我指定了RGB的颜色，所以呈现一个灰色区域
int randNum=rnd.nextInt(8999)+1000;
使用随机数，这里随机数的范围是1000~9999来输出一个4位的随机数
g.setFont(new Font("",Font.PLAIN,20));
设置图像上的文本字体，字体类型，字体大小。我这里没有设置字体，就是使用默认字体，可以设置为微软雅黑之类的字体，字体类型使用了Font.PLAIN (无类型，int值为0) ，可选值 Font.BOLD (粗体，int值为1)，Font.ITALIC（斜体，int值为2），当然我们设置为3（也就是粗体加斜体）
String randStr=String.valueOf(randNum); //将验证码存入session session.setAttribute("randStr",randStr);
这里将具体数值存入session，名字叫randStr，之后会使用
第二步：在需要的页面引入这个JSP
<td>
<input type="text" name="code" size="10"> <img id="imgValidate" src="code.jsp" onclick="refresh()" title="看不清可单击图片刷新">
</td>
增加一个输入项，name="code"，Action中要使用，code.jsp就是我们在上面写的验证码页面，为这个img标签来个id="imgValidate"，javascript中要使用，同时增加一个JavaScript方法用于点击验证码进行刷新
JavaScript代码：
<script type="text/javascript">
function refresh(){
document.getElementById("imgValidate").src="code.jsp?"+new Date();
}
</script>
浏览器可能会缓存我们的验证码，如果请求相同的src就不会再进行请求，验证码也不会更新，所以我们以当前时间为参数（虽然这个参数对于服务器端没什么作用）来蒙骗浏览器当成不同的请求，以此保证验证码可以刷新
第三步：在Action中获得用户输入的验证码与实际显示的验证码进行比较
在Action中增加一个名为code的String变量，并生成其set/get方法
private String code; public String getCode() { return code; } public void setCode(String code) { this.code = code; }
在需要验证的方法里进行比较：
String randStr=(String) session.getAttribute("randStr");
if(code!=null){
if(code.equals(randStr)){
System.out.println("验证码正确");
}else{
System.out.println("验证码错误");
}
}
这里使用到了之前传入session中的名为randStr的值，使其与用户输入的code变量进行比较
以上是关于简易的网页验证码的主要内容，如果未能解决你的问题，请参考以下文章