重点内容为: jQuery验证控件jquery.validate.js使用说明+中文API【http://www.tuicool.com/articles/iABvI3】
简单教程可以参考【jQuery的validate插件使用整理(传智播客_王昭珽)】
(一)需求介绍
管理员后台添加用户时,邮箱需要满足需求有
(1)不能为空,因为要支持用户使用邮箱登陆
(2)不恩重复,因为要用户使用邮箱登陆所有重复会让使用户登陆报错
(3)格式正确
(二)效果
(三)编码
(1)jsp页面
说明:f:text是自定义标签
validate是一个基于Jquery的表单验证插件,利用他的remote可以用来自定义远程验证 JQuery validate插件Remote用法大全的相关资料(http://www.jb51.net/article/84220.htm) 关键是格式要正确:如 class里面的 email:{email:true},
<td class="in-lab" width="15%">
<s:message code="user.email"/>:</td> <td class="in-ctt" width="35%" > <f:text
name="email"
value="${oprt=='edit' ? (bean.email) : ''}"
class="{
email:{email:true},
required:true,
remote:{url:'check_email.do',
type:'post',
data:{original:'${oprt=='edit' ? (bean.email) : ''}'}},
messages:{remote:'${emailExist}'}}" style="width:180px;"/>
</td>
jsp页面对user.email.exist的提示信息用变量emailExist进行了保存
<c:set var="emailExist">
<s:message code="user.email.exist"/>
</c:set>
user.email.exist信息保存在配置文件中
user.email.exist=\u7535\u5B50\u90AE\u7BB1\u5DF2\u5B58\u5728 //电子邮箱已存在
(2)controller层方法
/**
* 检查邮箱是否存在
*
* @return
* @throws IOException
*/
@RequestMapping("check_email.do")
public void checkEmail(String email, String original, HttpServletResponse response) {
if (StringUtils.isBlank(email)) {
Servlets.writeHtml(response, "false");
return;
}
if (StringUtils.equals(email, original)) {
Servlets.writeHtml(response, "true");
return;
}
// 检查数据库是否重名
boolean exist = service.emailExist(email);
if (!exist) {
Servlets.writeHtml(response, "true");
} else {
Servlets.writeHtml(response, "false");
}
}