1、validate的引用

#jQuery 有很多表单验证插件 #

#最常用的插件之一 #

//validate插件依赖于jquery，所以需要如此引用<script src=";></script><script src=";></script>

2、基本校验使用（标签上的为空及长度等验证）

<form action=""  class="demoform" id="demoForm">  <div class="index-form">    <div class="common-form-label">姓名：</div>		<div class="common-input">      <!-- 插件带有基本的校验规则，比如 data-rule-required="true"为空校验等-->      <input type="text" name="name" placeholder="请输入学生姓名"      data-rule-required="true" data-msg-required="请输入竞赛学生姓名"       data-rule-minlength="5" data-msg-minlength="最少需要5个字符" >    </div>	</div>	<div class="index-form">  	<input type="submit" value="查询"  class="sk-btn">  </div> </form>

3、远程校验 remote

$('#demoForm').validate({  debug:true,//加debug，表单就不会提交，适合调试  rules:{//规则,规则的操作对象，都是其name属性 name="name"    name:{      //name.php 表示接口，在输入后，会远程校验name的输入值      // remote:'name.php' //默认是get请求，参数是name的输入值      remote:{        url:"tel.php",        type:"post",        //参数是name输入值和当前时间        data:{          loginTime:function(){            return +new Date;//当前时间          }        },      }    },  },  messages:{//提示信息    name:{      remote:"用户已存在" //远程校验的错误信息    }  },  invalidHandler : function(event,validator){      //console.log("错误数："+validator.numberOfInvalids())；    return false;//invalidHandler 无效表单提交后允许的函数  },  submitHandler : function(form) {    //验证通过后允许的函数    //console.log($(form).serialize())  },});

4、基本验证方法

 rules:{//规则   tel:{       rangelength:[1,10], //长度范围       range:[3,8]//数字的范围       email:true,//合法的邮件       url:true,//合法的url       date:true     }   }, messages:{//提示信息     tel:{       rangelength:"请控制应该在2-10位",       range:"请控制在3，8，包括3和8之间"     }   },

//equalTo 常用语密码的确认输入 rules:{//规则   psssword:{     required:true   },     "confirm-password":{       equalTo:"#password" //对应校验的选择器     } },  messages:{     "confirm-password":{       equalTo:"两次输入的密码不一致"     }   }

5*、valid() 方法

1、检查表单或者某些元素是否有效

alert( $perRegForm.valid()?"填写正确":"填写错误")

2、校验规则

//操作对象：表单元素$('.username').rules();//获取元素的校验规则$('.username').rules('add',{minlength:2,maxlenght:10}); //新增$('.username').rules('remove','minlength maxlenght'); //删除

6*、Validator对象

validate方法返回的是validate对象( 如下：oValidator就是 validate对象 )var oValidator= $('#demoForm').validate({  debug:true});

6、Validator 对象有很多有用的方法

validator.form();//验证表单是否有效，返回true/falsevalidator.element('.username');//验证某个元素是否有效，返回true/falsevalidator.resetForm();//把表单恢复验证前原来的状态validator.showErrors();//针对某个元素显示特定的错误信息validator.numberOfInvalids();//返回无效的元素数量//方法实例oValidator.showErrors({  name:"我是针对指定name的错误信息，hoho"})

//举例子//为class为txt的新增验证规则$.validator.addClassRules({  txt:{    required:true,    minlength:5  }})

1、validate方法配置项

1）ignore 和 depends

var oValidator= $('#demoForm').validate({  debug:true,  //ignore:":hidden",//ignore默认对隐藏的元素不进行校验  ignore:'.name',//对某些元素不进行验证    //depends 隐形规则  rules:{    username:{      required:{        //depends 隐形规则，depends返回ture的时候，再执行required        depends:function(element){          return $("#password").is(":filled"); //密码校验正确后        }      },      //带参数的      minlength:{        param:2,        depends:function(element){          return $("#password").is(":filled"); //密码校验正确后        }      }    },//name end      },//rules end    });

2）groups

//groups 对一组元素的验证，用一个错误提示，//+用errorPlacement控制（把出错信息放在哪里）var oValidator= $('#demoForm').validate({  debug:true,  groups:{    //name 等表示元素name属性    login:"name username password confirm-password"  },  errorPlacement:function(error,element){    //error表示错误信息，element表示出错的元素    error.insertBefore('#info');  }});

3) focusInvalid 提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）是否会获得焦点

var oValidator= $('#demoForm').validate({  debug:true,  focusInvalid:true ,//设置true表示 ：光标会定位在第一个出错的元素  focusCleanup:true,// 设置true表示：光标定位元素时，会移除该元素的错误提示});

4）class 相关的配置项

如果不配置，会生成如下默认的class，如下：

var oValidator= $('#demoForm').validate({  debug:true,  errorClass:"wrong", //校验没通过生成wrong，默认是error（即：name所在元素+产生的label元素）  validClass:"right"//校验通过生成right，默认是valid（即：name所在元素）});

进阶class

var oValidator= $('#demoForm').validate({  debug:true,  //<label id="name-error" class="wrong success" for="name"></label>  success:'success',//针对label元素  //highlight和unhighlight 针对元素本身  highlight:function(element,errorClass,validClass){    $(element).addClass('validClass').removeClass('validClass');  },  unhighlight:function(element,errorClass,validClass){    $(element).addClass('validClass').removeClass('valivalidClassdClass');  },});

选择器扩展

$('input:blank').length; 

4章、自定义验证方法

  $('#demoForm').validate({    debug:true,    rules:{      username:{        required:true,        postcode:true,//这个是自定义方法，        postcode2:"中国",//带参数的youbian      }    }  });// 加一个验证方法$.validator.addMethod("postcode",function(){  var postcode=/^[0-9]{6}/;  //需求：我们的元素不为空，才需要验证，就需要加上 this.optional(element),没值不验证，直接返回true  return this.optional(element) || (postcode.test(value));},"请填写正确的邮编！")// 信息：请填写正确的中国邮编$.validator.addMethod("postcode2",function(){  var postcode2=/^[0-9]{6}/;  return this.optional(element) || (postcode2.test(value));},$.validator.format( "请填写正确的{0}邮编！"))

additional-methods.js 包含了很多扩展验证方法

//也可以自定义一个jquery.validate.config.js 用来放自定义的验证方法require(['dist/jquery.validate.min'],function(){	if(jQuery.validator != undefined && jQuery.validator.length > 0) {        jQuery.validator.addMethod("isLegalCharacter", function(value, element) {                var regPattern = /^[^\|<>]*$/;                return this.optional(element) || (regPattern.test(value));            }, "有奇怪的字符出现哦~~");                jQuery.validator.addMethod("CN", function(value, element) {              var regPattern = /^[\u4e00-\u9fa5]+$/;//中文验证            return this.optional(element) || regPattern.test(value);          }, "请输入中文");     }});

5章：安全性

客户端安全性：

在数据被输入程序前必须对数据合法性的校验。非法输入问题是最常见的web应用程序安全漏洞。

所有提交的表单数据，都必须验证两次，即提交前在客户端验证，提交后在服务器端再次验证。保证数据的合法性。

服务器端不要相信任何的客户端数据！