首页 > 代码库 > jquery-validation插件

jquery-validation插件

2024-09-06 01:47:00   217人阅读

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

一、下载

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

二、使用

引入js文件：

<script src=http://www.mamicode.com/"jquery-1.11.3.min.js"></script><script src=http://www.mamicode.com/"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));}, "请正确填写您的邮政编码");

 

jquery-validation插件


联系
我们