首先我们介绍验证码的效果,如图所示:
我们点击图片和看不清楚,换一张需要刷新验证码;输入验证码,光标离开和点击登陆都要验证是否正确;不正确提示
那么我们以前使用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
运行效果: 未输入
输入错误:
正确: