kaptcha验证码使用配置
效果图:1. 首先加入 kaptcha的jar包在工程中kaptcha-2.3.2.jar和kaptcha-2.3.2-jdk14.jar2. 配置web.xml:对kaptcha的参数进行配置:Kaptchacom.google.code.kaptcha.servlet.KaptchaServletkaptch
·
效果图:
1. 首先加入 kaptcha的jar包在工程中kaptcha-2.3.2.jar和kaptcha-2.3.2-jdk14.jar
2. 配置web.xml:对kaptcha的参数进行配置:
<!-- 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.names</param-name>
<param-value>宋体,楷体,微软雅黑</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>90</param-value>
</init-param>
<!-- 使用哪些字符生成验证码 -->
<init-param>
<param-name>kaptcha.textproducer.char.string</param-name>
<param-value>abcdefghigkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ2345679</param-value>
</init-param>
<!-- 图片高度 -->
<init-param>
<param-name>kaptcha.image.height</param-name>
<param-value>40</param-value>
</init-param>
<!-- 字体大小 -->
<init-param>
<param-name>kaptcha.textproducer.font.size</param-name>
<param-value>30</param-value>
</init-param>
<!-- 干扰线的颜色
<init-param> <param-name>kaptcha.noise.color</param-name>
<param-value>green</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.background.clear.from</param-name>
<param-value>green</param-value>
</init-param>
<!-- 验证码背景颜色渐进 -->
<init-param>
<param-name>kaptcha.background.clear.to</param-name>
<param-value>white</param-value>
</init-param>
<!-- 去掉干扰线 -->
<init-param>
<param-name>kaptcha.noise.impl</param-name>
<param-value>com.google.code.kaptcha.impl.NoNoise </param-value>
</init-param>
<!-- 验证码样式引擎 默认为WaterRipple -->
<init-param>
<param-name>kaptcha.obscurificator.impl</param-name>
<param-value>com.google.code.kaptcha.impl.ShadowGimpy</param-value>
</init-param>
</servlet>
<!-- 映射的url -->
<servlet-mapping>
<servlet-name>Kaptcha</servlet-name>
<url-pattern>/Kaptcha.jpg</url-pattern>
</servlet-mapping>
3. jsp页面展示:
<script type="text/javascript">
$(function(){
$('#kaptchaImage').click(function () {
$(this).attr('src', 'Kaptcha.jpg?' + Math.floor(Math.random()*100) );
});
});
</script>
<form id="dialog_login_loginForm" method="post">
<table>
<tr><th>用户名</th><td><input name="name" /></td></tr>
<tr><th>密码</th><td><input name="pwd" type="password" /></td></tr>
<tr><th>验证码</th><td><img id="kaptchaImage" src="Kaptcha.jpg" title="看不清,点击换一张.不区分大小写。"/>
<input name="verifyCode" id="verifyCode" style="width:80px;" /></td>
</tr>
</table>
</form>
初始化提交提交表单
$('#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',
});
}
}
});
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);
}
更多推荐
已为社区贡献2条内容
所有评论(0)