记录基于SSH框架下登录验证码模块的实现过程步骤。
1、前端页面代码：
主要以jQuery的ajax异步请求实现。
...
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function () {
//验证码图片刷新
$("#vcode").click(function () {
$(this).prop("src","${pageContext.request.contextPath }/user_createVerificationCode?"+new Date());
});
//验证码校验
$("#txtcode").blur(function () {
var url = "${pageContext.request.contextPath }/user_checkVerificationCode"
var code = $(this).val();
$.get(url,{"code":code},function (result) {
if(result != ""){
$("#tip").html(result);
//验证码错误,登录按钮失效
$("#btn").prop("disabled","disabled");
}else{
$("#tip").html("");
$("#btn").removeAttr("disabled");
}
});
});
})
</script>
...
<tr>
<td>验证码：</td>
<td><input id=txtcode name=txtcode required></td>
<td><img src="${pageContext.request.contextPath }/user_createVerificationCode" /></td>
<td> <span></span></td>
<tr>
<td></td>
<td>
<input value="登录">
</td>
</tr>
...
2、struts.xml
<package extends="struts-default" namespace="/">
<action method="{1}"></action>
</package>
3、applicationContext.xml
<bean scope="prototype">
<property ref="validateCode"/>
</bean>
<!-- 生成验证图片需要为多例,默认情况为单例 -->
<bean scope="prototype">
<constructor-arg index="0">
<value>80</value>
</constructor-arg>
<constructor-arg index="1">
<value>20</value>
</constructor-arg>
<constructor-arg index="2">
<value>4</value>
</constructor-arg>
<constructor-arg index="3">
<value>10</value>
</constructor-arg>
</bean>
4、Action.java
public class UserAction extends ActionSupport implements ModelDriven<User>{private String code;
public String getCode() { return code;}
public void setCode(String code) {this.code = code;}
private ValidateCode validateCode;
public void setValidateCode(ValidateCode validateCode) {
this.validateCode = validateCode;
}
public String createVerificationCode(){
String vcode = validateCode.getCode ();
HttpSession session = ServletActionContext.getRequest().getSession();
session.setAttribute("vcode",vcode);
try {
validateCode.write (ServletActionContext.getResponse().getOutputStream ());//将服务器生成的验证码，以流的形式写给客户端（变成图片）
} catch (IOException e) {
e.printStackTrace();
}
return NONE;
}
public String checkVerificationCode() throws IOException {
HttpSession session = ServletActionContext.getRequest().getSession();
String vcode = (String) session.getAttribute("vcode");
if (!code.equalsIgnoreCase(vcode)){
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
response.getWriter().println("验证码输入有误!");
}else{
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("");
}
return NONE;
}
}
5、ValidateCode.java
package cn.dsna.util.images;