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

小白之作,仅供参考!