最近搞了个小系统,做用户注册和登录时需要表单校验.开始用的原始的JS和AJAX进行校验(自认为自己前端很弱),废了不少劲,改来改去.后想起朋友推荐用JQuery有个Validate插件,网上搜了不少材料,发现拷贝官方文档的很多,但是带有实例的很少,决定写篇博客,用实例说明下怎样使用这个强大的校验插件.
一. Html表单代码
这里就省略不写了,很简单的表单,重点就是表单条目的ID能和下面配置的JS代码匹配起来就OK.
二.JQuery-validate代码(JS代码)
<span style="font-family:Arial;font-size:14px;"><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="$!webPath/resources/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ex-validate-methods.js"></script>
<style>
label.error {//用CSS定义异常提示的字体 大小 和 颜色
font-family: 微软雅黑, 宋体;
font-weight: bold;
font-size: 14px;
color: red;
font-size: 14px;
}
</style>
<script type="text/javascript">
/* JQuery-validate校验注册表单 */
$(document).ready(function() {
$("#form").validate({
focusCleanup:true,//当输入框获取焦点时,清除后面的错误信息
onfocusout : function(element) {//当输入框失去焦点时,进行校验
$(element).valid();
},
rules : {
phone : {
required : true,
isMobile : true,
remote : {//利用AJAX进行异步校验(代码简单明了很喜欢)
url : "checkPhone", //后台处理程序
type : "post", //数据发送方式
dataType : "json", //接受数据格式
data: {
phone: function() {
return $("#phone").val();
}
}
}
},
password : {
required : true,
minlength : 6
},
rePassWord : {
required : true,
equalTo : "#password"
},
userName : {
required : true,
maxlength : 50
},
idNumber : {
required : true,
isIdCardNo : true
},
email : {
email : true
}
},
messages : {
phone : {
required : "请输入手机号",
isMobile : "请输入正确的手机号",
remote : "该手机已注册"
},
password : {
required : "请输入密码",
minlength : $.validator.format("至少{0}位")//可以应用这样的方式,动态读取校验规则的数据.
},
rePassWord : {
required : "请输入确认密码",
equalTo : "两次输入密码不一致"
},
userName : {
required : "请输入用户名",
maxlength : $.validator.format("用户名不超过{0}位")
},
idNumber : {
required : "请输入身份证号",
isIdCardNo : "请输入正确的身份证号"
},
email : {
email : "请输入正确的email地址"
}
}
});
});
</script></span>
<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;">rules: 配置了对哪些输入框进行校验(匹配标签ID)</span></span>
<span style="font-size:14px;"></span><pre name="code" class="javascript"><span style="font-size:14px;"><span style="font-family:Microsoft YaHei;">messages :配置了当设定的校验规则不通过时的提示信息,JQuery会动态添加到输入框的后面.</span></span>
<span style="font-size:14px;"></span><pre name="code" class="javascript"><span style="font-size:14px;"><span style="font-family:Microsoft YaHei;">ex-validate-methods.js: 虽然JQuery-validate插件,提供了很多校验规则,但是毕竟的国外的框架,很多校验规则还得自己写(比如中国的身份证号,手机号等),网上很多现成的正则和校验方法JS,拿来放到一个单独的扩展JS里,引入到页面就OK了.</span></span>
<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;">rules: 配置了对哪些输入框进行校验(匹配标签ID)</span></span>
<span style="font-size:14px;"></span><pre name="code" class="javascript"><span style="font-size:14px;"><span style="font-family:Microsoft YaHei;">messages :配置了当设定的校验规则不通过时的提示信息,JQuery会动态添加到输入框的后面.</span></span>
<span style="font-size:14px;"></span><pre name="code" class="javascript"><span style="font-size:14px;"><span style="font-family:Microsoft YaHei;">ex-validate-methods.js: 虽然JQuery-validate插件,提供了很多校验规则,但是毕竟的国外的框架,很多校验规则还得自己写(比如中国的身份证号,手机号等),网上很多现成的正则和校验方法JS,拿来放到一个单独的扩展JS里,引入到页面就OK了.</span></span>
三. controller层代码
<span style="font-family:Arial;font-size:14px;">/**
* 校验手机号是否重复
*
* @param user
* @return
*/
@RequestMapping("/checkPhone")
public void checkPhone(@RequestParam String phone, HttpSession httpSession,HttpServletResponse response) {
// 依据用户的手机号查询,若能查询得到则说明该手机号已经注册过了.
boolean ret = false;
try {
PrintWriter writer = response.getWriter();
User rlsUser = userServiceInter.findByPhone(phone);
if (rlsUser == null) {
ret = true;
}
writer.print(ret);
} catch (Exception e) {
e.printStackTrace();
}
}</span>
控制层方法,用于前端配置的AJAX异步校验,要求是输出为boolean[writer.print(ret)]的方法(开始我以为是返回值为boolean搞了好久才明白).
JQuery-Validate百度云: http://pan.baidu.com/s/1iG7Oq
扩展校验方法JS百度云:http://pan.baidu.com/s/1hqi4vLa
小白之作,仅供参考!