摘要：
Kaptcha是一个简单易用的验证代码生成工具。通过配置，您可以定义验证码大小、颜色、显示的字符等。http://code.google.com/p/kaptcha/downloads/list2.创建一个新的Web项目，并将kapcha-2.2.3.2.jar放在项目的Web-INF/lib目录下的下载包中。3.配置web。xml文件--使用的字体--˃kaptcha。文本生产者。字体。名称ArialKaptcha/Kaptcha。jpg索引。jsp4.显示验证代码索引的页面。jsp˂！
kaptcha是一个简单好用的验证码生成工具，通过配置，可以自己定义验证码大小、颜色、显示的字符等等。
1、下载kaptcha。
http://code.google.com/p/kaptcha/downloads/list
2、新建一个Web项目，并将下载压缩包中的kaptcha-2.3.2.jar放在项目的WEB-INF/lib目录下。
3、配置web.xml文件。
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<!-- kaptcha验证码配置 -->
<servlet>
<!-- 生成图片的Servlet -->
<servlet-name>Kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
<!-- 是否有边框-->
<init-param>
<param-name>kaptcha.border</param-name>
<param-value>no</param-value>
</init-param>
<!-- 字体颜色 -->
<init-param>
<param-name>kaptcha.textproducer.font.color</param-name>
<param-value>red</param-value>
</init-param>
<!-- 图片宽度 -->
<init-param>
<param-name>kaptcha.image.width</param-name>
<param-value>135</param-value>
</init-param>
<!-- 使用哪些字符生成验证码 -->
<init-param>
<param-name>kaptcha.textproducer.char.string</param-name>
<param-value>ACDEFHKPRSTWX345679</param-value>
</init-param>
<!-- 图片高度 -->
<init-param>
<param-name>kaptcha.image.height</param-name>
<param-value>50</param-value>
</init-param>
<!-- 字体大小 -->
<init-param>
<param-name>kaptcha.textproducer.font.size</param-name>
<param-value>43</param-value>
</init-param>
<!-- 干扰线的颜色 -->
<init-param>
<param-name>kaptcha.noise.color</param-name>
<param-value>black</param-value>
</init-param>
<!-- 字符个数 -->
<init-param>
<param-name>kaptcha.textproducer.char.length</param-name>
<param-value>4</param-value>
</init-param>
<!-- 使用哪些字体 -->
<init-param>
<param-name>kaptcha.textproducer.font.names</param-name>
<param-value>Arial</param-value>
</init-param>
</servlet>
<!-- 映射的url -->
<servlet-mapping>
<servlet-name>Kaptcha</servlet-name>
<url-pattern>/Kaptcha.jpg</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>4、显示验证码的页面index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证码</title>
<script type="text/javascript">
//点击切换验证码
function changeVerifyCode(img){
img.src = "http://t.zoukankan.com/Kaptcha.jpg?"+Math.floor(Math.random()*100);
}
</script>
</head>
<body>
<p>
<form action="result.jsp">
<table>
<tr>
<td>
</td>
<td>
<img src="http://t.zoukankan.com/Kaptcha.jpg" onclick="changeVerifyCode(this)" style="cursor: pointer;">
</td>
</tr>
<tr>
<td>
请输入验证码：
</td>
<td>
<input type="text" name="verifyCode">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="提交">
</td>
</tr>
</table>
</form>
</body>
</html>5、运行项目，显示结果。
6、最后加上异步验证，看输入的验证码是否正确。
1）增加一个验证的Servlet
package cn.luxh.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class VerifyServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charaset=utf-8");
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
PrintWriter out = null;
try {
//响应数据
String resultData;
//获取传过来的验证码
String verifyCode = request.getParameter("verifyCode");
System.out.println("verifyCode----"+verifyCode);
if(verifyCode=="") {
resultData = "N";
}else {
//获取kaptcha生成存放在session中的验证码
String kaptchaValue = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
//比较输入的验证码和实际生成的验证码是否相同
if(kaptchaValue == null || kaptchaValue == ""||!verifyCode.equalsIgnoreCase(kaptchaValue)) {
resultData = "N";
}else {
resultData = "Y";
}
}
out = response.getWriter();
out.write(resultData);
out.flush();
}catch(Exception e) {
e.printStackTrace();
}finally {
if(out != null) {
out.close();
}
}
}
}2）在web.xml中添加这个Servlet的配置
<!-- 检查验证码是否输入正确 -->
<servlet>
<servlet-name>VerifyServlet</servlet-name>
<servlet-class>cn.luxh.servlet.VerifyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>VerifyServlet</servlet-name>
<url-pattern>/VerifyServlet</url-pattern>
</servlet-mapping>3）页面index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证码</title>
<script type="text/javascript" src="http://t.zoukankan.com/${pageContext.request.contextPath}/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//点击切换验证码
function changeVerifyCode(img){
img.src = "http://t.zoukankan.com/Kaptcha.jpg?"+Math.floor(Math.random()*100);
}
//提交
function doSubmit() {
var verifyCodeValue = $("#verifyCode").val();
if(verifyCodeValue.replace(/s/g,"") == "") {
alert("请输入验证码");
}else {
//提交前先异步检查验证码是否输入正确
var verifyUrl = "${pageContext.request.contextPath}/VerifyServlet?verifyCode="+verifyCodeValue;
$.ajax({
type:"GET",
url:verifyUrl,
success:function(returnData){
if(returnData!="Y") {
alert("请输入正确的验证码！");
}else {
//验证码正确，进行提交操作
//.....
}
},
error:function(e){
alert(e);
}
});
}
}
</script>
</head>
<body>
<p>
<form action="result.jsp">
<table>
<tr>
<td>
</td>
<td>
<img src="http://t.zoukankan.com/Kaptcha.jpg" onclick="changeVerifyCode(this)" style="cursor: pointer;">
</td>
</tr>
<tr>
<td>
请输入验证码：
</td>
<td>
<input type="text" name="verifyCode" id="verifyCode">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" value="提交" onclick="doSubmit()">
</td>
</tr>
</table>
</form>
</body>
</html>4）运行结果
