jQuery插件——Validation Plugin表单验证

- 日理万妓 2022-07-13 00:51 218阅读 0赞

# 概念 #

验证方法：

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增加组合验证类型

--------------------

## 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，不填写不验证
    },"请填写正确的邮编")

![中文国际化][SouthEast]

[SouthEast]: /images/20220713/9f01375530cf4f91a2686b0ba3458e20.png