jquery-validation插件

Posted 2020-09-01 sakuramoon

jQuery Validation插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。

一、下载

插件下载地址：https://jqueryvalidation.org/

二、使用

引入js文件：

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.validate-1.13.1.js"></script>

js代码：

$("form").validate(
    //配置项
);

三、API

1、rules:定义校验规则

rules:{
            first_word_input:{
                required:true
            },
            brand_choose_input:{
                required:true
            }
        }

2、messages:定义提示信息

messages:{
            first_word_input:{
                required:"*请选择首字母"
            },
            brand_choose_input:{
                required:"*请选择品类"
            }
        }

3、ignore:对某些元素不进行验证

4、debug:只验证不提交

如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

 debug:true

5、errorClass:指定错误提示的 css 类名，可以自定义错误提示的样式

6、errorElement: 使用什么标签标记错误

7、errorPlacement:Callback 指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。

errorPlacement : function(error, element) {
            //忽略自定义的方法错误提示
            if (error.text() == "ignore") {
                return true;
            }
            error.appendTo(element.parents(".form-group"));
        }

8、submitHandler: 通过验证后运行的函数，可以加上表单提交的方法

 submitHandler:function(form){
        form.submit();         //form是DOM对象
}

9、验证的触发方式修改

10、自定义验证方法

 jQuery.validator.addMethod(name,method,[message])；

参数：

　　name:方法名称

　　method:function（value,element,params）方法逻辑，value是元素的值,element是元素本身 param是参数

　　message:提示消息

// 邮政编码验证   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

 

四、实例

$("form").validate({
    debug:true,
    rules:{
        first_word_input:{
                required:true
            },
            brand_choose_input:{
                required:true
            }
    },
    messages:{
            first_word_input:{
                required:"*请选择首字母"
            },
            brand_choose_input:{
                required:"*请选择品类"
            }
    },
    errorClass:"error_tip",
    errorElement: "label",
    errorPlacement : function(error, element) {
            //忽略自定义的方法错误提示
        if (error.text() == "ignore") {
                return true;
            }
        error.appendTo(element.parents(".form-group"));
    },
    submitHandler:function(form){
            form.aubmit();
    }              
});

jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");