加入依赖
<!-- Kaptcha 验证码插件 -->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
在 spring-mvc.xml 中加入
<!-- Kaptcha 图片验证码 -->
<bean id="chptchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
<property name="config" >
<bean class="com.google.code.kaptcha.util.Config">
<constructor-arg>
<props>
<prop key="kaptcha.border">yes</prop>
<prop key="kaptcha.border.color">105,179,90</prop>
<prop key="kaptcha.textproducer.font.color">blue</prop>
<prop key="kaptcha.image.width">125</prop>
<prop key="kaptcha.image.height">45</prop>
<prop key="kaptcha.textproducer.font.size">45</prop>
<prop key="kaptcha.session.key">code</prop>
<!--
<prop key="kaptcha.textproducer.char.string">abcdfkgujtmei123456789</prop>
-->
<prop key="kaptcha.textproducer.char.length">4</prop>
<prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>
</props>
</constructor-arg>
</bean>
</property>
</bean>
属性具体配置:http://www.jianshu.com/p/e6c71bc37759
文本实现类:kaptcha.textproducer.impl
值为:com.google.code.kaptcha.text.impl.DefaultTextCreator
验证码值配置:kaptcha.textproducer.char.string
值:abcde2345678gfynmnpwx(随意你自己写)
验证码的长度:kaptcha.textproducer.char.length
值:
字体:kaptcha.textproducer.font.names
值:Arial,Courier
字体颜色:kaptcha.textproducer.font.color
值: r,g,b 或者 white,black,blue
文字间隔:kaptcha.textproducer.char.space
值:
干扰实现类:kaptcha.noise.impl
值:com.google.code.kaptcha.impl.DefaultNoise/NoNoise
干扰颜色:kaptcha.noise.color
值: r,g,b 或者 white,black,blue
图片样式:kaptcha.obscurificator.imp
l 值:
水纹com.google.code.kaptcha.impl.WaterRipple
;
鱼眼com.google.code.kaptcha.impl.FishEyeGimpy
;
阴影com.google.code.kaptcha.impl.ShadowGimpy
背景实现类:kaptcha.background.imp
l 值:com.google.code.kaptcha.impl.DefaultBackground
背景渐变色开始:kaptcha.background.clear.from
值:r,g,b 或者 white,black,blue
背景渐变色结束:kaptcha.background.clear.to
值:r,g,b 或者 white,black,blue
文字渲染器:kaptcha.word.impl
值:com.google.code.kaptcha.text.impl.DefaultWordRenderer
session中存放验证码的key键:kaptcha.session.key
值:KAPTCHA_SESSION_KEY
Contro;;er 中实现
/**
* 验证码生成
* @param request
* @param response
* @return
* @throws IOException
*/
@RequestMapping(value="/captcha-image")
public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
System.out.println(request);
System.out.println(response);
// 从 session 获取验证码的 code 值
HttpSession session = request.getSession();
System.out.println(session);
String code = (String) session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
System.out.println(code);
// 设置清除浏览器的缓存
response.setDateHeader("Expires", 0);
response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
response.addHeader("Cache-Control", "post-check=0, pre-check=0");
response.setHeader("Pragma", "no-cache");
response.setContentType("image/png");
// 设置 session
String capText = captchaProducer.createText();
System.out.println("设置session:" + capText);
session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
// 输出验证码
BufferedImage bi = captchaProducer.createImage(capText);
ServletOutputStream out = response.getOutputStream();
ImageIO.write(bi, "png", out);
out.flush();
out.close();
return null;
}
/**
* 验证码校验
* @param request
* @param response
* @param code_j
* @return
* @throws Exception
*/
@RequestMapping("/codeCheck")
public String codeCheck(HttpServletRequest request, HttpServletResponse response,
@RequestParam("code")String code_j) throws Exception {
HttpSession session = request.getSession();
String code = (String) session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
JSONObject json = new JSONObject();
if (code_j.equals(code)) {
json.put("ok", true);
} else {
json.put("ok", false);
}
ResponseUtil.write(response, json);
return null;
}
JSP 页面
<tr>
<td>验证码:</td>
<td><input id="j_code" type="text" name="j_code" onblur="javascript:codeCheck()"></td>
![](${path }/test/captcha-image)
<a href="javascript:chageCode()">看不清?换一张</a>
</tr>
<script type="text/javascript">
// 刷新验证码
function chageCode() {
var time = new Date().getTime();
$("#kaptchaImage").attr('src', '${path }/test/captcha-image?id='+time);
}
// Ajax 验证验证码
function codeCheck() {
var code = $('#inputImagecode').val();
$.post(
'${path}/codeCheck',
{
'code' : code
},
function(result) {
if(result.ok) {
//alert("验证码正确!");
$('#inputImagecode').css('background-color', 'rgba(91, 255, 173, 0.2)')
$('#submitbtn').addAttr('onsubmit');
} else {
//alert("验证码错误!");
$('#inputImagecode').css('background-color', 'rgba(255, 81, 81, 0.2)')
$('#submitbtn').removeAttr('onsubmit');
}
}, 'json');
}
</script>