jQuery Validate 插件简介

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。

validate()方法中的可以设置的属性
	 rules规则
	 messages  自定义错误消息提示
	 submitHandler 表单提交(当表单验证全部通过时)  

一 .默认校验规则
required : true 必需的 “必选字段” 必须输入
remote :{url:"",type:"",dataType:"",data:{}} 远程的实现异步验证",使用 ajax 方法调用 {} 验证输入值。默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。
email :true 电子邮件
url : true 合法的网址
date : true 合法的日期
dateISO :true 合法的日期 (ISO),例如：2009-06-23，1998/01/22。只验证格式，不验证有效性
number : true 合法的数字
digits : true 输入整数
creditcard : true 合法的信用卡号
equalTo : “#field” “输入和#field相同的值”
accept : 拥有合法后缀名的字符串,
maxlength:5 长度最多是 5 的字符串（汉字算一个字符）
minlength :1 长度最少是 1的字符串（汉字算一个字符）
rangelength:[6,12] 长度介于 6 和 10 之间的字符串（汉字算一个字符）。
range:[5,10] 输入值必须介于 5 和 10 之间。
max:5 输入一个最大为5 的值
min :3 输入一个最小为3 的值

二 .自定义验证规则

jQuery.validator.addMethod(name,function(jQuery.validator.addMethod(name,function(){},message)){},message)
	//添加一个自定义的邮箱格式验证
	jQuery.validator.addMethod(
		"isEmail", 
		function(value, element) {   
			var regex = /^\w+@\w+\.\w+/;
			return (regex.test(value));
		}, 
		"请正确填写您的邮箱"
	);

三 .表单提交的方法

submitHandler:function(){//表单提交   
		$.ajax({});//或使用form.submit(); 
	}

四 .案例 :添加验证

1.引入js:jquery.validate.js
2.validate验证
1).必须有表单
2).必须有name属性,以name属性验证
3.选中表单 调用validate()方法

$("#xForm").validate({
  		rules:{},
		messages:{},
		submitHandler:function(){  $.ajax({});//或使用form.submit();}
	})


$("#xForm").validate({//id为xForm的表单添加validate验证
		rules:{
			bookName:{
  				required:true,
  				remote:{
  					url:"<%=request.getContextPath() %>/bookServlet?method=checkName",
  					type:"post",
  					dataType:"json",
  					data:{bookName:
							function (){
  								return $("#bookName").val();
  							}
					}
				}
  			},
			email:{
				required: true,
				email: true,  
			}
		},//rules 规则
		messages:{
			bookName:{
  				required:"书名不能为空",
  				remote:"书名已存在"
  			},			
			email: {
				required: "请输入Email地址", 
				email: "请输入正确的email地址"
			}
		},//messages 自定义错误消息提示,  默认提示信息 英文 
		submitHandler:function(){//表单提交   当验证都通过时 表单提交
			$.ajax({});//或使用form.submit(); 
		}
	});

修改错误消息的位置

errorPlacement: function(error, element) {
				//error为生成的提示标签对象，element为被验证的标签对象
				//如果元素为单选框
				if ( element.is(":radio") ) {
					//将error元素添加到 单选框的父节点的下一个的下一个，也就是空白的td
					error.appendTo( element.next().next() );//
				} else if ( element.is(":checkbox") ) {
					error.appendTo ( element.next() );
				} else {
					error.appendTo( element.parent().next() );
				}
			}