学习 jQuery Validation 插件 整理笔记

表单验证插件
一、引入
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
二、method:验证方法，指校验的逻辑。
例如:email方法是检查输入文本是否符合email的规则。
其中validate()方法为核心方法，定义了基本的校验规则和一些有用的配置项。
例如:配置项debug: true，则表单不会提交，只进行检查（调试时十分方便）。
rule:验证规则，指元素和验证方法的关联。
例如:页面一个id为email的文本框，需要带有email的验证方法。
三、基本验证方法
required必填(不能为空项时使用，如用户名，密码)
remote远程校验（比如需要看用户名是否存在,填写是否正确，进入后台数据库查询。）
minlength最小长度 maxlength最大长度 rangelength长度范围
min最小值 max最大值 range值范围
/最长度和最值两组的区别：
rangelength：[2,10]代表输入字符长度在两个到十个之间，输入“11”，是两位字符，不会有错误。
range：[2,10]代表输入数字范围为2到10之间，输入“11”，大于10，会有错误。/
email Email格式（为true时，要求输入合法正确email格式才可以，@）
url URL格式（为true时，要求输入合法正确URL格式才可以，http：//之类的）
date日期（多种格式日期都支持）
dateISO ISO日期（只支持 四位年-月-日或 四位年/月/日 或-/交互使用）
number数字（多种支持，负数，小数）
digits整数（只支持 正整数）
equalTo与另一个元素值相等（输入密码后的确认密码0
例如： "confirm-password":{equalTo:"#password"）}
四、高级验证方法
1.valid（）方法：检查表单或某些元素是否有效。
2.rules（）方法：①无参数时：获取表单【元素】的校验规则（即：username可以，但demoForm不行）
②（“add”，{min:2,max:10}）或（"remove","min max"）向表单元素添加或删除校验规则
3.Validator对象：
①validate方法返回Validator对象，其有很多有用的方法，课程中是在控制台演示的。
Validator.form() 验证表单是否有效，返回 true/false
Validator.element("#username") 验证某个元素是否有效，返回true/false
Validator.resetForm() 把表单恢复到验证前原来的状态
Validator.showErrors({username:"你填错了",password:" "}) 针对某个元素显示特定的错误信息
Validator.numberOfInvalids() 返回无效的元素数量
②Validator对象还有很多有用的静态方法，可直接使用，不用var validator后再validator=....
$.validator.addMethod(name,method [,message] )增加自定义的验证方法▶▶▶详见第五点◀◀◀
$.validator.format(template,argument,argumentN...)格式化字符串，用参数代替模板中的{n}
例如：var template=$.vaildator.format("{0}-{1}-{2}")；template("值在",["2","10"]，“之间”)
$.validator.setDefaults(options)修改插件默认设置
$.validator.addClassRules(name,rules)为某些包含名为name的class增加组合验证类型。
4.validate（）方法配置项
submitHandler 通过【验证后】运行的函数，可以加上表单提交的方法
例如：submitHandler:function(from){ from:submit(); $(form).Ajax.submit();//$ajax等方式提交表单 }）
invalidHandler 【无效】表单提交后运行的函数
例如：invalidHandler:function(event,validator){ }
也可以写一个事件来触发$("选择器属性值").on("事件名",function(event,validator)){});
ignore("默认:hidden") 对某些元素不进行验证（默认不对隐藏的元素进行验证）
rules 定义校验规则（每条规则都有depends属性，true才执行。）
required：{
depends：function（element）{ //element代表username
return $("#password").is(":filled");
}
}
minlength:{
param:2,
depends：function（element）{
return $("#password").is(":filled");
}
}
messages 定义提示信息
groups 对一组元素的验证，用一个错误提示，用errorPlacement控制把出错信息放在哪里
例如： groups:{login:"username password confirm-password"} //对一组元素进行验证
errorPlacement:function(error,element){ //对一组元素验证后错误信息显示
error.insertBefore("#info");//显示在id为info的位置上}

       onsubmit是否在提交时验证
       onfocusout是否在获取焦点时验证
       onkeyup是否在敲击键盘时验证
       onclick是否在鼠标点击时验证，一般用于checkbox或者radio
       focusInvalid提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）是否会获得焦点
      focusCleanup当未通过验证的元素获得焦点时，是否移除错误提示
      errorClass指定错误提示的css类名，默认为error,可以自定义
      validClass指定验证通过的css类名
      errorElement使用什么标签标记错误 （如<li>标记）
      wrapper使用什么标签把上边的errorElement包起来 （如<ul>包裹）
      errorLabelContainer把错误信息统一防在一个容器里面 （如放在类或id选择器中）
      errorContainer显示或者隐藏验证信息，可以自动实现由错误信息出现时把容器属性变为显示，无错误时隐藏（以上四个一般同时使用）
       showError可以显示总共有多少个未通过验证的元素
             例如：  showErrors:function(errorMap,errorList){
     自定义错误方式console.log(errorMap);console.log(errorList);
                           this.defaultShowErrors();}//调用系统默认的错误信息展示方式

errorMap,errorList区别：list比map更详细，map可以直接自定义信息，list可以用来分析错误信息

       errorPlacement自定义错误信息放到哪里
       success要验证的元素通过验证后的动作（主要针对的是l验证标签元素）
       highlight可以给未通过验证的元素加效果（主要针对input元素）
       unhighlight去除未通过验证的元素的效果，一般和highlight同时使用
 5.选择器扩展:
          :blank 选择所有值为空的元素
          :filed 选择所有值不为空的元素
          :unchecked 选择所有没有被选中的元素（一般针对复选框）

五、自定义验证方法
addMethod(name,method [,message])
name：方法名称
method：function(value,element,params)方法逻辑
value=验证元素的值
element=验证元素
params 可选参数
message：提示信息
例如： username:{required:true,postcode:true //或 postcode:"中国" -----这里的"中国"会被传给{0}}
$.validator.addMethod("postcode", function(value, element,params) {var postcode= /^[0-9]{6}$/;
return this.optional(element) || (postcode.test(value));}, $.validator.format("请填写正确的{0}邮编!"));
return this.optional(element);当邮政编码不是必填项时，element为空，返回true，不会进行效验
return (postcode.test(value));当邮政编码是必填项时，不管是否有值，都要进行效验