一、导入Kaptcha验证码库文件
我当初尝试使用maven导入,毕竟做项目时采用的是maven开发,但Kaptcha验证码库文件死活导入失败,就直接采用jar文件导入方式导入了,下载路径。
二、在web.xml中配置验证码相关处理拦截
<servlet> <!-- 验证码功能 -->
<servlet-name>KaptchaServlet</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.border.color</param-name>
<param-value>105,179,90</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>130</param-value>
</init-param>
<init-param> <!-- 设置生成图片高度 -->
<param-name>kaptcha.image.height</param-name>
<param-value>38</param-value>
</init-param>
<init-param> <!-- 设置验证码显示文字尺寸 -->
<param-name>kaptcha.textproducer.font.size</param-name>
<param-value>30</param-value>
</init-param>
<init-param> <!-- 设置验证码保存到session中的属性名称 -->
<param-name>kaptcha.session.key</param-name>
<param-value>rand</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.textproducer.char.length</param-name>
<param-value>4</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.obscurificator.impl</param-name>
<!-- <param-value>com.google.code.kaptcha.impl.FishEyeGimpy</param-value> -->
<param-value>com.google.code.kaptcha.impl.ShadowGimpy</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>KaptchaServlet</servlet-name>
<url-pattern>/captcha.jpg</url-pattern>
</servlet-mapping>
三、jsp页面定义验证码的位置以及显示方式
<div class="form-group" id="codeDiv">
<label class="col-md-2 control-label" for="code">验证码:</label>
<div class="col-md-3">
<input type="text" name="code" id="code" class="form-control input-sm" size="4" maxlength="4" placeholder="请输入验证码...">
</div>
<div class="col-md-2">
<img id="imageCode" src="captcha.jpg">
</div>
<div class="col-md-4" id="codeMsg">*</div>
</div>
其中最重要的位置在于
<img id="imageCode" src="captcha.jpg">
此处的captcha.jpg与web.xml文件中定义的servlet配置<url-pattern>/captcha.jpg</url-pattern>相一致。
四、触发方式
页面加载后,会优先进行一个kaptcha的请求,获取数据,按照你在web.xml中设置的格式样式等信息显示对应的信息到指定的jsp页面中,同时按照你定义的
<init-param> <!-- 设置验证码保存到session中的属性名称 -->
<param-name>kaptcha.session.key</param-name>
<param-value>rand</param-value>
</init-param>
保存至session中,key为设定的rand。
五、点击验证码实现更换操作
$("#imageCode").on("click",function(){
$("#imageCode").attr("src","captcha.jpg?p=" + Math.random()) ;
}) ;
六、实现验证码的校验操作
定义服务器,实现控制器的监听
package cn.linkpower.singup.action.front;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import cn.linkpower.util.action.AbstractAction;
import cn.linkpower.util.string.StringUtils;
/**
*验证码处理类
* @author 76519
*
*/
@Controller
public class RandAndCodeAction extends AbstractAction{
private Logger log = Logger.getLogger(RandAndCodeAction.class);
@RequestMapping("/checkRandAndCode")
public ModelAndView checkRandAndCode(String code , HttpServletRequest request,
HttpServletResponse response){
log.info("调用验证码校验类");
HttpSession session = request.getSession();
//web.xml文件配置中有验证码保存kaptcha.session.key----取得session中保存的code值
String rand = (String) session.getAttribute("rand");
log.info("session中存储的验证码:"+String.valueOf(rand));
log.info("用户输入的验证码:"+code);
if(StringUtils.isEmpty(rand)){
super.print(response, false);
return null;
}
//取得页面传递来的验证码值
//String code = request.getParameter("code");
if(StringUtils.isEmpty(code)){
super.print(response, false);
return null;
}
//都存在
super.print(response, rand.equalsIgnoreCase(code));
return null;
}
@Override
public String getFileUploadDir() {
return null;
}
}
其中定义的父类,只是做了返回输出以及读取文件等操作
public abstract class AbstractAction {
public void print(HttpServletResponse response, Object value) {
try {
response.setCharacterEncoding("UTF-8");
response.getWriter().print(value);
} catch (IOException e) {
e.printStackTrace();
}
}
}
前端提交代码,请求相应的控制器
$("#myform").validate({
debug : true, // 取消表单的提交操作
submitHandler : function(form) {
form.submit(); // 提交表单
},
errorPlacement : function(error, element) {
$("#" + $(element).attr("id").replace(".", "\\.") + "Msg").append(error);
},
highlight : function(element, errorClass) {
$(element).fadeOut(1,function() {
$(element).fadeIn(1, function() {
$("#" + $(element).attr("id").replace(".","\\.") + "Div").attr("class","form-group has-error");
});
})
},
unhighlight : function(element, errorClass) {
$(element).fadeOut(1,function() {
$(element).fadeIn(1,function() {
$("#" + $(element).attr("id").replace(".","\\.") + "Div").attr("class","form-group has-success");
});
})
},
errorClass : "text-danger",
rules : {
"mid" : {
required : true
},
"password" : {
required : true
},
"code" : {
required : true ,
remote : {
url : "checkRandAndCode.action", // 后台处理程序
type : "post", // 数据发送方式
dataType : "html", // 接受数据格式
data : { // 要传递的数据
code : function() {
return $("#code").val();
}
},
dataFilter : function(data, type) {
if (data.trim() == "true") {
return true;
} else {
return false;
}
}
}
}
}
});
上述js代码,只需要采用其中的code部分即可,主要实现输入的code和session(有时间限制)中保存的code相对比(忽略大小写问题)。