1.新建web项目，导入jar包：kaptcha-2.3.jar
2.配置web.xml代码如下：
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app version="3.0" 3 xmlns="http://java.sun.com/xml/ns/javaee" 4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 5 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> 6 7 8 9 10 <welcome-file-list> 11 <welcome-file>index.jsp</welcome-file> 12 </welcome-file-list> 13 14 15 16 17 <!-- kaptcha验证码配置 --> 18 <servlet> 19 20 <description>This is the description of my J2EE component</description> 21 <display-name>This is the display name of my J2EE component</display-name> 22 23 <!-- 生成图片的servlet --> 24 <servlet-name>Kaptcha</servlet-name> 25 <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> 26 27 <!-- 是否有边框 --> 28 <init-param> 29 <param-name>kaptcha.border</param-name> 30 <param-value>no</param-value> 31 </init-param> 32 33 <!-- 字体颜色 --> 34 <init-param> 35 <param-name>kaptcha.textproducer.font.color</param-name> 36 <param-value>red</param-value> 37 </init-param> 38 39 <!-- 图片宽度 --> 40 <init-param> 41 <param-name>kaptcha.image.width</param-name> 42 <param-value>135</param-value> 43 </init-param> 44 45 <!-- 使用哪些字符生成验证码 --> 46 <init-param> 47 <param-name>kaptcha.textproducer.char.string</param-name> 48 <param-value>ACDEFHKPRSTWX345679</param-value> 49 </init-param> 50 51 <!-- 图片高度 --> 52 <init-param> 53 <param-name>kaptcha.image.height</param-name> 54 <param-value>50</param-value> 55 </init-param> 56 57 <!-- 字体大小 --> 58 <init-param> 59 <param-name>kaptcha.textproducer.font.size</param-name> 60 <param-value>43</param-value> 61 </init-param> 62 63 <!-- 干扰线的颜色 --> 64 <!-- <init-param> 65 <param-name>kaptcha.noise.color</param-name> 66 <param-value>balck</param-value> 67 </init-param> --> 68 69 <!-- 字符个数 --> 70 <init-param> 71 <param-name>kaptcha.textproducer.char.length</param-name> 72 <param-value>4</param-value> 73 </init-param> 74 75 <!-- 使用哪些字体 --> 76 <init-param> 77 <param-name>kaptcha.textproducer.font.names</param-name> 78 <param-value>Arial</param-value> 79 </init-param> 80 </servlet> 81 <servlet> 82 <description>This is the description of my J2EE component</description> 83 <display-name>This is the display name of my J2EE component</display-name> 84 <servlet-name>VerifyServlet</servlet-name> 85 <servlet-class>cn.hbsi.nzx.servlet.VerifyServlet</servlet-class> 86 </servlet> 87 88 89 <!-- 映射的url --> 90 <servlet-mapping> 91 <servlet-name>Kaptcha</servlet-name> 92 <url-pattern>/Kaptcha.jpg</url-pattern> 93 </servlet-mapping> 94 95 99 100 </web-app>
3.写表单index.jsp
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML> 3 <html> 4 <head> 5 <title>显示KaptchaServlet生成的验证码</title> 6 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.4.js"></script> 7 <script type="text/javascript"> 8 //点击切换验证码 9 function changeVerifyCode(){ 10 $("#yzmImg").attr("src","Kaptcha.jpg?"+Math.floor(Math.random()*100)); 11 } 12 13 //提交 14 function doSubmit() { 15 16 var verifyCodeValue = $("#verifyCode").val(); 17 if(verifyCodeValue.replace(/s/g,"") == "") { 18 alert("请输入验证码"); 19 }else { 20 //提交前先异步检查验证码是否输入正确 21 var verifyUrl = "${pageContext.request.contextPath}/servlet/VerifyServlet?verifyCode="+verifyCodeValue; 22 $.ajax({ 23 type:"GET", 24 url:verifyUrl, 25 success:function(returnData){ 26 if(returnData!="Y") { 27 alert("请输入正确的验证码！"); 28 }else { 29 //验证码正确，进行提交操作 30 alert("验证码输入正确，提交表单"); 31 } 32 }, 33 error:function(e){ 34 alert(e); 35 alert("111"); 36 } 37 }); 38 } 39 } 40 </script> 41 </head> 42 43 <body> 44 <form> 45 <table> 46 <tr> 47 <td> 48 请输入验证码： 49 </td> 50 <td> 51 <input type="text" name="verifyCode" id="verifyCode"> 52 <img src="Kaptcha.jpg" onclick="changeVerifyCode()" id="yzmImg" style="cursor: pointer;"> 53 <a href="javascript:void(0)" onclick="changeVerifyCode()">看不清，换一张</a> 54 </td> 55 </tr> 56 <tr> 57 <td> 58 59 </td> 60 <td> 61 <input type="button" value="提交" onclick="doSubmit()"> 62 </td> 63 </tr> 64 </table> 65 </form> 66 </body> 67 </html>
4.写一个servlet验证验证码是否输入正确
1 /** 2 * 3 */ 4 package cn.hbsi.nzx.servlet; 5 6 import java.io.IOException; 7 import java.io.PrintWriter; 8 9 import javax.servlet.ServletException; 10 import javax.servlet.http.HttpServlet; 11 import javax.servlet.http.HttpServletRequest; 12 import javax.servlet.http.HttpServletResponse; 13 14 public class VerifyServlet extends HttpServlet { 15 16 17 public void doGet(HttpServletRequest request, HttpServletResponse response) 18 throws ServletException, IOException { 19 20 response.setContentType("text/html;charaset=utf-8"); 21 response.setHeader("pragma", "no-cache"); 22 response.setHeader("cache-control", "no-cache"); 23 PrintWriter out = null; 24 try { 25 //响应数据 26 String resultData; 27 //获取传过来的验证码 28 String verifyCode = request.getParameter("verifyCode"); 29 System.out.println("verifyCode----"+verifyCode); 30 if(verifyCode=="") { 31 resultData = "N"; 32 }else { 33 //获取kaptcha生成存放在session中的验证码 34 String kaptchaValue = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY); 35 //比较输入的验证码和实际生成的验证码是否相同 36 if(kaptchaValue == null || kaptchaValue == ""||!verifyCode.equalsIgnoreCase(kaptchaValue)) { 37 resultData = "N"; 38 }else { 39 resultData = "Y"; 40 } 41 } 42 out = response.getWriter(); 43 out.write(resultData); 44 out.flush(); 45 }catch(Exception e) { 46 e.printStackTrace(); 47 }finally { 48 if(out != null) { 49 out.close(); 50 } 51 } 52 } 53 }