1、validate的引用

#jQuery 有很多表单验证插件 #
https://plugins.jquery.com/tag/validate

#最常用的插件之一 #
http://jqueryvalidation.org

//validate插件依赖于jquery，所以需要如此引用

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

  

    
姓名：
		

      
      
    
	
	

  	
  
 

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/false
validator.element('.username');//验证某个元素是否有效，返回true/false
validator.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,
  //
  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应用程序安全漏洞。

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

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