效果图：
1. 首先加入 kaptcha的jar包在工程中kaptcha-2.3.2.jar和kaptcha-2.3.2-jdk14.jar
2. 配置web.xml：对kaptcha的参数进行配置：
Kaptcha
com.google.code.kaptcha.servlet.KaptchaServlet
kaptcha.border
no
kaptcha.textproducer.font.names
宋体,楷体,微软雅黑
kaptcha.textproducer.font.color
red
kaptcha.image.width
90
kaptcha.textproducer.char.string
abcdefghigkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ2345679
kaptcha.image.height
40
kaptcha.textproducer.font.size
30
kaptcha.textproducer.char.length
4
kaptcha.background.clear.from
green
kaptcha.background.clear.to
white
kaptcha.noise.impl
com.google.code.kaptcha.impl.NoNoise
kaptcha.obscurificator.impl
com.google.code.kaptcha.impl.ShadowGimpy
Kaptcha
/Kaptcha.jpg
3. jsp页面展示：
$(function(){
$('#kaptchaImage').click(function () {
$(this).attr('src', 'Kaptcha.jpg?' + Math.floor(Math.random()*100) );
});
});
| 用户名 | |
|---|---|
| 密码 | |
| 验证码 |  |
初始化提交提交表单
$('#dialog_login_loginForm').form({
url : "${pageContext.request.contextPath}/userAction!login.action",
success : function(data) {
var obj = jQuery.parseJSON(data);
if (obj.success) {
$.messager.show({
title : '提示',
msg : obj.msg,
});
loginDialog.dialog('close');
}else{
$.messager.show({
title : '提示',
msg : obj.msg,
iconCls:'icon-no',
});
}
}
});
验证验证码：
//判断验证码输入是否正确
function checkVerifyCode(){
$.ajax({
url : "${pageContext.request.contextPath}/userAction!checkVerifyCode.action?verifyCode="+$('#verifyCode').val(),
success : function(data) {
var obj = jQuery.parseJSON(data);
if (obj.success) {
$('#dialog_login_loginForm').submit();
}else{
$.messager.show({
title : '提示',
msg : obj.msg,
iconCls:'icon-no',
});
}
}
});
Action处理验证：
public void checkVerifyCode(){
Json j = new Json();
//获取传过来的验证码
String verifyCode =ServletActionContext.getRequest().getParameter("verifyCode");
//获取kaptcha生成存放在session中的验证码
String kaptchaValue = (String) ServletActionContext.getRequest().getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
//比较输入的验证码和实际生成的验证码是否相同
if(kaptchaValue == null || kaptchaValue == ""||!verifyCode.equalsIgnoreCase(kaptchaValue)) {
j.setMsg("输入的验证码不正确！");
}else {
j.setSuccess(true);
}
super.writeJson(j);
}
