jQuery插件——Validation Plugin表单验证

概念

验证方法：

method指校验的逻辑

email检验输入是否符合email的规则

验证规则：（方法+组合关联）

rule指元素和验证方法的关联

ID为email的文本框需要带有email的验证方法

基本验证方法

required 必填； remote 远程校验

minlength 最小值；maxlength 最大值；rangelength 长度范围

min 最小值； max 最大值；range 范围
数字的值，最大数，最小数

email Email格式；url URL格式； date 日期；dateISO日期

number 数字；digits 整数；equalTo 与另一个元素值相等

用户名和密码的校验

$("#demo").validate({
    debug:true，//表单不会提交，只进行检查
    rules:
    {
        username:
        {
            required:ture,
            minlength:2,
            maxlength:10,
            //rangelength:[2,10]= 最小／大值
            remote:{
            url:"remote.json",
            type:"post",//默认get请求
            data:{
                loginTime:function(){
                    return +new Date,
                }
            }
            }
        },
        password:
        {
            required:ture,
            minlength:2,
            maxlength:16
        },
    }，//username\password为属性name的值
    message:
    {
        username:
        {
            required:"必须填写用户名",
            minlength:"用户名最小为2位",
            maxlength:"用户名最大为10位"
        },
        password:
        {
            required:"必须填写密码",
            minlength:"密码最小为2位",
            maxlength:"密码最大为10位"
        },
    }，//username\password为属性name的值
})

email Email格式；url URL格式； date 日期；dateISO日期

aaa:
{
    email:true,
    url:true,
    data:true//dataISO:trueyyyy-/mm-/dd
},

number 数字；digits 整数；equalTo 与另一个元素值相等

aaa://aaa-aaa需要“”包围即  "aaa-aaa":{}
{
    number:true,//支持浮点型、整型
    digits:true,//非负整数
    equalTo:true//确认密码
},

---

valid()检查表单或元素是否有效

$("#check").click(function(){
    alert($("#aaa").valid()?"填写正确":"填写错误")；
});

---

rules()元素

//rules()：获取表单的校验规则
//rules("add"，rules)：向表单元素增加校验规则
//rules("add"，"名称1" "名称2")：删除表单元素增加校验规则
$("#check").click(function(){
    alert($("#aaa").valid()?"填写正确":"填写错误")；
});

---

Validator对象

validator方法返回Validator对象，Validator对象有很多方法：

Validator.form()验证表单是否有效，返回true／false
Validator.element(element)验证元素是否有效，返回true／false
Validator.resetForm()把表单恢复到验证前的状态
Validator.showErrors(errors)针对某个元素显示特定的错误信息
Validator.numberOfInvalids()返回无效的元素数量

Validator对象静态方法

jQuery.validator.addMethod(name, method,[message])增加自定义验证方法
jQuery.validator.format(temple, argument,argumentN…)格式化字符串，用参数代替模板中{n}
jQuery.validator.setDefaults(options)修改插件默认设置
jQuery.validator.addClassRules(name, rules)为某些名为name的class增加组合验证类型

var templete=$.validator.format("{0}-{1}-{2}");
templete("ni","wo","ta");\\ni-wo-ta
<!--修改插件默认设置-->
$.validator.setDefaults({debug:true});
<!--增加组合验证类型-->
$.validator.addClassRules({
    txt:{
        required:true,
        minlength:5
    }
});

---

validate方法配置项

submitHandler:function(form){
    console.log($(form).serialize());

invalidHandler:function(event，validator){
    console.log(" "+validator.numberOfInvalid());}//无效表单提交后运行的函数,event通过自定义事件触发
$("#demoForm").on("invalid-form",function(event，validator){
    console.log(" "+validator.numberOfInvalid())
    });//无效表单提交后运行的函数,event通过自定义事件触发

ignore:"#username"//对某些元素不进行校验

required:{depends:function(element){return $("#password"),is(":filled");}}
minlength:{param:2,depends:function(element){return $("#password"),is(":filled");}}
//rules定义校验规则，//可以定义depends属性，确定required的使用场景
message定义提示信息

groups:{login:"username password confirm-password"},
errorPlacement:function(error,element){error.insertBefore("#info");}
对一组元素验证，用一个错误提示，用errorPlacement控制把出错信息放在哪里

onsubmit：false//提交时是否验证
onfocusout：获取焦点时是否验证
onkeyup：在敲击键盘时，是否验证
onclick：在点击鼠标时，是否验证，checkbox或radio
focusInvalid：提交表单时，未通过验证的元素是否获得焦点，默认进入第一个无效的文本框
focusCleanup：为通过验证的元素获得焦点后，是否移除错误提示

errorClass 指定错误提示的css类名，自定义样式
validClass 指定验证通过的css类名
errorElement 使用什么标签标记错误
wrapper 使用什么标签把上边的errorElement包装起来
errorLableContainer 把错误信息统一放在一个容器里面
errorContainer 显示或隐藏验证信息，可以自动实现又错误信息出现时把容器属性变为显示，无错误时隐藏
errorContainer:"#info",
errorLableContainer:"#info",
errorElement:"li",
wrapper:"ul"

showError:function(errorMap,errorList){
    console.log(errorMap)//每个元素的错误信息
    console.log(errorList)//分析显示错误信息，详细
    this.defaultShowError();
}
success：要验证的元素通过验证后的动作
success:right/function(label){label.addClass("rrr")}//label元素

highlight 给为通过验证的元素加效果
unhighlight：去除为通过验证的元素的效果
highlight:function(element,errorClass,validClass){$(element).addClass(errorClass).removeClass(validClass);
$(element).fadeOut().fadeIn();}//表单元素
highlight:function(element,errorClass,validClass)
{$(element).addClass(validClass).removeClass(errorClass);}

---

选择器扩展

:black 选择值为空的元素//

全角空格、半角空格

:filled 选择值不为空的元素

:unchecked 选择没有被选中的元素

反选

---

自定义验证方法

$.validator.addMethod(name, method,[message])
name:方法名称
method：function(value, element,params)
message:提示消息

additional-method.js——包含很多种验证方法
$.validator.addMethod("postcode", function(value, element,params){
    var postcode=/^[0-9]{6}$/;
    return this.optional(element)||(post code.test(value));
    return (post code.test(value));//不填写也要验证
    //this.optional(element)表单不为空则为true，不填写不验证
},"请填写正确的邮编")