首先我们介绍验证码的效果，如图所示：

我们点击图片和看不清楚，换一张需要刷新验证码；输入验证码，光标离开和点击登陆都要验证是否正确；不正确提示

那么我们以前使用ajax是必不可少的，后台呢也不需要用到数据库；那么serlet是一个不错的选择；那么我们开始吧；

1、jar包：kaptcha-2.3.2.jar 这个jar网上随便可以下到，如果需要可以加我qq：648385408索取； 添加jar包不会的话可以查看我以前的博客；也可以百度；这里不描述了；

2、js：jquery-1.9.1.js 这个网上也下载的有，主要是为了刷新出图片

3、web.xml配置

Kaptcha

com.google.code.kaptcha.servlet.KaptchaServlet

kaptcha.border

no

kaptcha.textproducer.font.color

red

kaptcha.image.width

135

kaptcha.textproducer.char.string

ACDEFHKPRSTWX345679

kaptcha.image.height

50

kaptcha.textproducer.font.size

43

kaptcha.noise.color

black

kaptcha.textproducer.char.length

4

kaptcha.textproducer.font.names

Arial

Kaptcha

/Kaptcha.jpg

以上xml原封不懂贴到xml中就可以了，记得不要覆盖原有的

3、网页配置

size=-1>验证码：

size=-1>

看不清，换一张

以上是现实图片的html代码 js代码如下：

点击切换验证码

//点击切换验证码

function changeVerifyCode(){

$("#yzmImg").attr("src","Kaptcha.jpg?"+Math.floor(Math.random()*100));

//切换验证码后清空输入框内容、后面提示字清空；

document.getElementById("verifyCode").value="";

document.getElementById("verifyCodeSpan").innerHTML = "";

}

判断是否正确：

function Codevalidate(field) {

//if ($.trim(field.value).length != 0) {

if($.trim(field.value).length == 0) {

flag = true;

document.getElementById("verifyCodeSpan").innerHTML = "请输入验证码";

// alert("请输入验证码");

}else {

//提交前先异步检查验证码是否输入正确

var verifyUrl = "${pageContext.request.contextPath}/servlet/VerifyServlet?verifyCode="+$.trim(field.value);

$.ajax({

type:"GET",

url:verifyUrl,

success:function(returnData){

if(returnData!="Y") {

flag = true;

document.getElementById("verifyCodeSpan").innerHTML = "验证码不正确";

}else {

flag = false;

//验证码正确，进行提交操作

document.getElementById("verifyCodeSpan").innerHTML = "验证码输入正确";

}

},

error:function(e){

flag = true;

alert(e);

}

});

}

}

以上js验证是通过ajax到serlet中验证的，那么就要写后台serlet了

生成图片js：

4、serlet如下：VerifyServlet

package com.marcellotest.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();

}

}

}

}

xml添加：

VerifyServlet

com.marcellotest.servlet.VerifyServlet

VerifyServlet

/servlet/VerifyServlet

运行效果：   未输入

输入错误：

正确：