jQuery表单验证插件——Validation

    
    
    



    

        
用户登录
        

        
输入错误

        

            用户名
            
        

        

            密码
            
        

        

            确认密码
            
        

        

            检查表单
            
        
    

关于标签的一些问题：

1、fieldset标签

定义和用法

fieldset 元素可将表单内的相关元素分组。

标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到

标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

标签没有必需的或唯一的属性。

2、legend标签

定义和用法

legend 元素为 fieldset元素定义标题（caption）。

例：

关于插件：

1、首先Validation插件是表单验证插件，所有一定是form表单。


2、如果输入不正确或不输入，input会自动添加error样式，且自动添加label标签。


   

            用户名
           
   

开始：

错误输入：

正确输入：

3、不懂这种写法？input[type=submit]表示设置提交按钮的样式？
input[type=submit], button {
    margin-top: 20px;
    font-size: 36px;
    padding: 10px 0;
}

4、label标签的for属性
for 属性规定 label 与哪个表单元素绑定。
隐式和显式的联系
标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

5、rule规则中定义的username和password对应的是name属性值不是id属性值。


6、validate是插件的核心方法，定义一些基本的校验规则和一些有用的配置项。
   例如：debug: true表示表单不会提交，只进行检查。


7、remote远程校验，比如判断用户名是否存在
rules: {
                username: {
                    required: true,//必填
                    minlength: 2,
                    maxlength: 10，
 remote:"remote.json"  //json字符串中返回false，默认get方法提交
                }
 }
messages:{//自定义提示信息
                 username:{
                    required:"必须填写用户名",
                    minlength:"用户名最小为2位",
                    maxlength:"用户名最大为10位"，
 remote:"用户名不存在"
   }
   实际后台代码中可以进行对数据库的操作。


   也可以设置post请求：
 rules: {
                username: {
                    required: true,//必填
                    minlength: 2,
                    maxlength: 10，
       remote:{
 url:"remote.json",//链接
 type:"post",//提交方式
 data:{//提交数据，默认提交username，也可以提交其他的数据
    loginTime:function(){
  return +new Date;//相当于Date对象调用getTime（）方法，返回一个long型的毫秒数时间
}
 }
       }
}
  }


问题：XMLHttpRequest cannot load file，不能加载json？
大概是因为必须从localhost打开？


return +new Date;？
+是一个转换符，是转换为字符串，还是转换为数字，要看加号前后的数据类型，如果都是数字，自然结果还是数字，如果一个是数字一个是字符串就会转换为字符串，像这里加号左边没有任何东西，那么加号的作用就是试着将右边的时间类型转换为数字，有getTime()方法，自然能够转换成数字。


8、rangelength，长度范围
minlength: 2,
      maxlength: 10
   可以写成
rangelength：[2,10]
   message中的写法：
      rangelength:"用户名应该在2-10位"


  对比min、max、range：
      min：2，
max：10
  是指输入的值在2-10之间，相应range也是这个意思。


9、dateISO 标准日期格式：年-月-日 或 年/月/日
   dateISO:true
   2016-10-03


10、其他验证方法：
    number：数字（number：true）
    digits：整数（digits：true）
    equalTo：与其他数值一致


    "confirm-password":{
        equalTo:"#password"
     }
    因为中间有连字符，所以用引号引入，equalTo后的值是要比较的选择器的值。


11、valid（）：检查表单或某些元素是否有效
    $("#check").click(function(){
        alert($("#demoForm").valid() ? "输入信息正确！" : "输入信息不正确！");
    });


12、rules（）：获取表单元素的校验规则
    rules（“add”，“rules”）：向表单元素增加校验规则
    rules（“remove”，rules）：删除表单元素校验规则


    $("#username").rules("add",{minlength:2,maxlength:10})
    $("#username").rules("remove","minlength maxlength")
    注意：rules（）获取的是某个表单元素的校验信息，获取整个表单的校验信息会报错。


13、validator对象
    validate方法返回validator对象
    validator.form（）：验证表单是否有效，返回true/false
    控制台：validator.form() -> false


    validator.element(element)：验证某个元素是否有效，返回true或false
    控制台：validator.element("#username") -> false


    validator.resetForm（）：把表单恢复到验证前的状态
    validator.showErrors（errors）：针对某个元素显示特定的错误信息
    控制台：validator.showErrors({
  username:"你填错了！"，
        password:"密码也错了！"
})


    validator.numberOfInvals（）：返回无效的元素数量
    控制台：validator.numberOfInvals（） -> 2（什么都不填）


14、validator对象一些静态方法，可以直接使用
    jQuery.validator.setDefaults(options)：修改插件默认设置
    将所有表单设置debug为true：
    $.validator.setDefaults({ debug:true });


    jQuery.validator.addClassRules(name,rules)：为某些包含名为name的class增加组合验证类型
    去除required方法，加上class=“txt”
    $.validator.addClassRules({
    txt:{
  required:true,
         minlength:5
}
    })


15、validate方法配置项：rules
    举例：如果密码没有填写，那么用户名也不需要填写
    rules: {
                username: {
                    required:{
     depends:function(element){
                            return $("#password").is(":filled");//密码是否被填写
                         }
  },
                    minlength: {
                        param：2，
                        depends:function(element){
                            return $("#password").is(":filled");
                        }//如果$("#password").is(":filled")为true，参数被传入
                    },
                    maxlength: 10
            }


16、validate方法配置项：ignore，对某些元素不进行校验
    默认值：ignore:":hidden" 不对隐藏的元素进行校验
    ignore:"#username" 登录时不再进行校验


17、validate配置项：groups，对一组元素的验证，用一个错误提示，用errorPlacement控制把出错信息放在哪里。
    在表单中加入一个p标签，
   

    处理错误信息：
    groups:{
login:"username password confirm-password"
    },
    errorPlacement:function(error,element){
    error.insertBefore("#info"); //将错误信息添加到#info前面
    }

18、validate配置项：
    onsubmit，是否在登录时进行验证。
    例：onsubmit：false  不进行验证，默认是true


    onfocusout：是否在获取焦点时验证
    onkeyup：是否在敲击键盘时验证
    onclick：是否在鼠标点击时验证，一般用于checkbox或者radio
    focusInvalid：提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）是否会获得焦点
    focusCleanup：当未通过验证的元素获得焦点时，是否移除错误提示


    errorClass：指定错误提示的css类名，可以自定义错误提示的样式
    validClass：指定验证通过的css类名
    例： errorClass:"wrong",
         validClass:"right"

    errorElement：使用什么标签标记错误
    wrapper：使用什么标签把上边的errorElement包起来
    errorLabelContainer：把错误信息统一放在一个容器里面
    errorContainer：显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏
    例：
 errorContainer:"#info2",//有错误信息时显示，没有则不显示
 errorLabelContainer:"#info",//错误信息放在#info里面
          errorElement:"li",//用li标签标记
          wrapper:"ul"//用ul标签将li包裹起来

    showErrors：可以显示总共有多少个未通过验证的元素
    例：
        showErrors:function(errorMap,errorList){
             console.log(errorMap);
             console.log(errorList);
             this.defaultShowErrors();//如果不写就没有默认的错误提示信息
        }

    errorPlacement：自定义错误信息放到哪里
    success：要验证的元素通过验证后的动作
    例：success:"right"
            或
           success:function(label){
           label.addClass("rrrrright");
        }

    highlight：出错时触发
    unhighlight：通过验证时触发，一般和highlight同时使用
    例：
         highlight:function(element,errorClass,validClass){
             $(element).addClass(errorClass).removeClass(validClass);
             $(element).fadeOut().fadeIn();//未通过时淡入淡出
         },
         unhighlight:function(element,errorClass,validClass){
             $(element).addClass(errorClass).removeClass(validClass);
             //通过时移除样式
         },


19、选择器扩展
    ：blank  选择所有值为空的元素
    ：filled  选择所有值不为空的元素
    ：unchecked  选择所有没有被选中的元素


20、自定义验证方法
    jQuery.validator.addMethod{name,method[,mesage]}
    name:方法名称
    method:function{value，element，params} 方法逻辑
    message:提示消息
    例：
       $.validator.addMethod("postcode",function(value,element,params){
             var postcode = /^[0-9]{6}$/;//六位0-9的数字
             return this.optional(element) || (postcode.test(value));
            },"请填写正确的邮编！");


       rules:{
                username:{
                    required:true,//必填
                    //minlength:2,//最小长度
                    //maxlength:10//最大长度
                    postcode:true
              }
     注意：this.optional(element)表示在没有填写值的时候返回true，也就是说在没有输入时不进行验证，不写前者表示不输入也进行验证，也就是此项必填，(postcode.test(value))表示在符合要求时返回true。return的值为false则显示提示信息。


    additional-methods.js  validate插件本身提供了这个js文件，包含了很多扩展验证方法
    例：
 $.validator.addMethod("postcode",function(value,element,params){
             var postcode = /^[0-9]{6}$/;//六位0-9的数字
             return this.optional(element) || (postcode.test(value));},$.validator.format("请填写正确的{0}邮编！"));
     
    给rules中的postcode传参：postcode：“中国”
    传入的参数显示在{0}的位置

21、关于安全性
    在数据被输入程序前必须对数据的合法性进行检验。非法输入问题是最常见的web应用程序安全漏洞。
    所有提交的表单数据，都必须验证两次，即提交前在客户端验证，提交后在服务器端再次验证，保证数据的合法性。