kaptcha验证码框架的原理:在web.xml文件中配置谷歌开发的servlet,并在servlet标签里面设置参数。然后从session中获取正确的答案,与用户表单提交的答案对比即可。
<servlet>
<servlet-name>kaptcha</servlet-name>
<servlet-class>
com.google.code.kaptcha.servlet.KaptchaServlet
</servlet-class>
<!-- 给验证码插件servlet类配置参数 -->
<!-- 边框设置 yes no -->
<init-param>
<param-name>kaptcha.border</param-name>
<param-value>no</param-value>
</init-param>
<!-- 边框颜色 颜色名称 例如:red blue black等 也可以是 RGB:105,179,90 -->
<init-param>
<param-name>kaptcha.border.color</param-name>
<param-value>red</param-value>
</init-param>
<!-- 边框宽度 -->
<init-param>
<param-name>kaptcha.border.thickness</param-name>
<param-value>5</param-value>
</init-param>
<!-- 产生验证码的字符源头 兼容中文的 -->
<init-param>
<param-name>kaptcha.textproducer.char.string</param-name>
<param-value>2345共</param-value>
</init-param>
<!-- 生成结果的字符个数 -->
<init-param>
<param-name>kaptcha.textproducer.char.length</param-name>
<param-value>5</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.size</param-name>
<param-value>40</param-value>
</init-param>
<!-- 生成结果的字符 颜色 -->
<init-param>
<param-name>kaptcha.textproducer.font.color</param-name>
<param-value>blue</param-value>
</init-param>
<!-- 生成结果的字符 字间距 -->
<init-param>
<param-name>kaptcha.textproducer.char.space</param-name>
<param-value>2</param-value>
</init-param>
<!-- 干扰线 生成器 -->
<init-param>
<param-name>kaptcha.noise.impl</param-name>
<param-value>com.google.code.kaptcha.impl.DefaultNoise</param-value>
</init-param>
<!-- 干扰线 颜色 -->
<init-param>
<param-name>kaptcha.noise.color</param-name>
<param-value>BLACK</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>yellow</param-value>
</init-param>
<!-- 验证码图片宽度 -->
<init-param>
<param-name>kaptcha.image.width</param-name>
<param-value>200</param-value>
</init-param>
<!-- 验证码图片高度 -->
<init-param>
<param-name>kaptcha.image.height</param-name>
<param-value>50</param-value>
</init-param>
</servlet>
<!-- 验证码请求名 映射 -->
<servlet-mapping>
<servlet-name>kaptcha</servlet-name>
<url-pattern>/yzm</url-pattern>
</servlet-mapping>
当然,验证码图片的链接就是:/yzm。
在servlet中验证验证码:
//设置request编码方式
req.setCharacterEncoding("utf-8");
//获取表单提交参数
String yzm = req.getParameter("yzm") ;
System.out.println(yzm);
//从session中获取google kaptcha 插件生成的验证码
String googlecode = req.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY).toString() ;
System.out.println(googlecode);
//比较验证码正确性
System.out.println(googlecode.equalsIgnoreCase(yzm)); //true
jsp部分代码:
<form action="kaptchatest" method="post">
<img id="verifyCodeImg" title = "点我换一张" alt="" src="yzm" style="cursor:pointer;" οnclick="changeVerifyCode();">
<input type="text" name="yzm">
<br>
<input type="submit" value="测试验证码">
</form>
<script type="text/javascript">
//点击切换验证码
function changeVerifyCode(){
//alert("asd");
var imgsrc = "yzm?"+Math.floor(Math.random()*100);
//alert("asx");
$("#verifyCodeImg").attr("src", imgsrc);
//alert("asx");
}
</script>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>