一、使用JQuery validate插件进行客户端验证
二、 在web.xml 中配置该Servlet
<servlet> <servlet-name>AuthImg</servlet-name> <servlet-class>org.agency.servlet.AuthImg</servlet-class> </servlet> <servlet-mapping> <servlet-name>AuthImg</servlet-name> <url-pattern>/authImg.jpg</url-pattern> </servlet-mapping>
三、 页面引用
<mce:script type="text/javascript"><!-- //验证码 function changeImg(){ document.getElementById("authImg").src = "authImg.jpg?timpstamp=" + new Date().getTime(); } // --></mce:script> 验证码: <input type="text" name="code" /> <img src="authImg.jpg" mce_src="authImg.jpg" id="authImg" /> <input type="button" value="看不清,换一张" onclick="changeImg();" />
四、 得到验证码!在AuthImg 中它把验证码封装到了session 对象中名字是rand, 然后得到code 和session 中的rand 比较这样验证码的功能就完成了!
AuthImg.java package org.agency.servlet; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; import java.awt.*; import java.awt.image.*; import java.util.*; import javax.imageio.*; /** * 图形验证码 hzl 09-11-29 */ public class AuthImg extends HttpServlet { private static final long serialVersionUID = 1L; // 定义图形验证码中绘制字符的字体 private final Font mFont = new Font("Arial Black", Font.PLAIN, 16); // 定义图形验证码的大小 private final int IMG_WIDTH = 100; private final int IMG_HEIGTH = 20; // 定义一个获取随机颜色的方法 private 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); } // 重写service方法,生成对客户端的响应 public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置禁止缓存 response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); response.setContentType("image/jpeg"); BufferedImage image = new BufferedImage(IMG_WIDTH, IMG_HEIGTH, BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics(); Random random = new Random(); g.setColor(getRandColor(200, 250)); // 填充背景色 g.fillRect(1, 1, IMG_WIDTH - 1, IMG_HEIGTH - 1); // 为图形验证码绘制边框 g.setColor(new Color(102, 102, 102)); g.drawRect(0, 0, IMG_WIDTH - 1, IMG_HEIGTH - 1); g.setColor(getRandColor(160, 200)); // 生成随机干扰线 for (int i = 0; i < 80; i++) { int x = random.nextInt(IMG_WIDTH - 1); int y = random.nextInt(IMG_HEIGTH - 1); int xl = random.nextInt(6) + 1; int yl = random.nextInt(12) + 1; g.drawLine(x, y, x + xl, y + yl); } g.setColor(getRandColor(160, 200)); // 生成随机干扰线 for (int i = 0; i < 80; i++) { int x = random.nextInt(IMG_WIDTH - 1); int y = random.nextInt(IMG_HEIGTH - 1); int xl = random.nextInt(12) + 1; int yl = random.nextInt(6) + 1; g.drawLine(x, y, x - xl, y - yl); } // 设置绘制字符的字体 g.setFont(mFont); // 用于保存系统生成的随机字符串 String sRand = ""; for (int i = 0; i < 6; i++) { String tmp = getRandomChar(); sRand += tmp; // 获取随机颜色 g.setColor(new Color(20 + random.nextInt(110), 20 + random .nextInt(110), 20 + random.nextInt(110))); // 在图片上绘制系统生成的随机字符 g.drawString(tmp, 15 * i + 10, 15); } // 获取HttpSesssion对象 HttpSession session = request.getSession(true); // 将随机字符串放入HttpSesssion对象中 session.setAttribute("rand", sRand); g.dispose(); // 向输出流中输出图片 ImageIO.write(image, "JPEG", response.getOutputStream()); } // 定义获取随机字符串方法 private String getRandomChar() { // 生成一个0、1、2的随机数字 int rand = (int) Math.round(Math.random() * 2); long itmp = 0; char ctmp = '/u0000'; switch (rand) { // 生成大写字母 case 1: itmp = Math.round(Math.random() * 25 + 65); ctmp = (char) itmp; return String.valueOf(ctmp); // 生成小写字母 case 2: itmp = Math.round(Math.random() * 25 + 97); ctmp = (char) itmp; return String.valueOf(ctmp); // 生成数字 default: itmp = Math.round(Math.random() * 9); return itmp + ""; } } }