JQuery.validate的使用方法(实例)

最近搞了个小系统,做用户注册和登录时需要表单校验.开始用的原始的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>

三. 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

小白之作,仅供参考!