三 Validator对象
1、介绍：Validate方法返回的对象称作Validator对象
2、使用
Validator对象常用方法
Validator.form()
返回：Boolean
验证：form返回成功还是失败(整个表单)
Validator.element()
返回：Boolean
验证单个元素是成功还是失败（单个的表单元素）
Validator.resetForm()
把前面验证的Form回复到验证前的状态
Validator.showErrors()
显示特定的错误信息
Validator.numberOfInvalids()
返回验证不通过的字段数
静态方法（只要引入了Validator的js就可以直接使用，不需要再获取validator对象，通常使用来做配置的）
jQuery.validator.setDefaults()
改变默认的配置
jQuery.validator.addClassRules()
增加组合验证类型，可以在一个css类里面用多种验证规则
jQuery.validator.format()
用参数代替模板中的{n}
jQuery.validator.addMethod
添加一个新的验证方法（可以是自定义的）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.12.1.js"></script> <script type="text/javascript" src="../js/validation/jquery.validate.js"></script> <script type="text/javascript" src="../js/validation/messages_zh.js"></script> <script type="text/javascript"> $.validator.setDefaults({ debug:true }); $.validator.addClassRules({ sunshengli:{ required:true, rangelength:[3,9] } }); /**param1：参数似乎规则的名字 *param2：函数：验证的函数 *param2：value */ $.validator.addMethod('sifangku',function(value,element,args){ if (args) { return /^[a-zA-Z_][a-zA-Z_0-9]*/.test(value); }else { //不验证 return true; } },"这里是错误提示-对不起没有通过sifangku验证，element指的是filed对象"); $(document).ready(function() { var validator = $("#form1").validate({ rules: { field1:{ required:true, rangelength:[4,6], sifangku:true } }, messages:{ field1:{ required:'field1不能为空', rangelength:'field1的长度必须子{0}与{1}之间', /*{0}取的是上述属性的第一个值，{1}取的是上述属性的第二个值 */ } }, invalidHandler:function(event,validator){ console.log('对不起您有'+validator.numberOfInvalids()+"个字段没有通过验证"); } }); $("button.form").click(function(){ console.log(validator.form()); }); $("button.element").click(function(){ console.log(validator.element('#form1 input:eq(0)')); }); $("button.resetForm").click(function(){ validator.resetForm(); }); $("button.showErrors").click(function(){ validator.showErrors({ field1:'fieldHasError' }); }); $("button.numberOfInvalids").click(function(){ console.log(validator.numberOfInvalids()); }); //演示$.validator.format的其他用途 var urls = [ { url:'http://www.baidu.com', name:'baidu' }, { url:'http://taobao.com', name:"taobao" } ]; var html=""; for(var i = 0; i < urls.length;i++) { html +='<br><a href='+urls[i].url+'>'+urls[i].name+'</a>'; } $('body').append(html); //用$.validator.format实现 var temp =$.validator.format('<br><a href={0}>{1}</a>'); var html1=""; for(var i = 0; i < urls.length;i++) { html1+=temp(urls[i].url,urls[i].name); } $('body').append(html1); }); //模板方法，占位符 var template = $.validator.format('{0}-的-{1}'); ///alert(template('小明','皮卡球')) </script> <style type="text/css"> form { margin: 10px 100px 10px 100px; } </style> </head> <body> <form id="form1"> <div> field1:<input type="text" name="field1" /> </div> <div> field2:<input type="text" name="field2" class="sunshengli"/> </div> <div> <input type="submit" name="submit" value="submit"/> </div> </form> <button class="form">Validator.form()</button> <button class="element">Validator.element()</button> <button class="resetForm">Validator.resetForm()</button> <button class="showErrors">Validator.showErrors()</button> <button class="numberOfInvalids">Validator.numberOfInvalids()</button> </body> </html>