jQuery Validation Plugin

资料

插件官方网站

下载地址（github）

演示地址

官方文档

基本说明

最基本的框架依赖：jquery.js和jquery.validate.min.js

示例代码：

<script type="text/javascript">    $(function(){        var validator = $("#form1").validate({            rules:{                name: {                    required:true,                    minlength:2,                    maxlength:5                }            },            messages:{                name: {                    required:"请输入姓名！",                    minlength:"姓名最少输入2位",                    maxlength:"姓名最多输入5位"                }            }        });        // 提交事件        $("#btn-submit").click(function(){            if(validator.form()){                $("#form1").submit();            }        });        // 清空表单中的错误提示，不是清空表单        $("#btn-reset").click(function(){            validator.resetForm();        });    });</script>

对目标表单，调用validate()，可以获得一个验证对象validate；

validate对象调用form()方法执行验证，并返回验证结果；

validate对象调用resetForm()方法，可以清空表单中的报错信息，不是清空表单内容。

自定义校验方法

$.validator.addMethod()方法，可以传入方法名和函数，添加自定义的校验方法；

添加成功后在验证时直接调用。

示例代码：

<script type="text/javascript">    $(function(){        $.validator.addMethod("rightName", function(value, element) {            return this.optional(element) || (value != '1234' && value != '1111');        });        var validator = $("#form1").validate({            rules:{                name: {                    required:true,                    minlength:2,                    maxlength:5,                    rightName:"名字文案"                }            },            messages:{                name: {                    required:"请输入姓名！",                    minlength:"姓名最少输入2位",                    maxlength:"姓名最多输入5位",                    rightName:"名字不要乱写！！！"                }            }        });        // 提交事件        $("#btn-submit").click(function(){            if(validator.form()){                $("#form1").submit();            }        });    });</script>

自定义验证报错

validate()函数的入参，提供了一组供开发者自定义报错信息的参数选项。

示例代码：

var validator = $("#form1").validate({    rules:{        name: {            required:true        }    },    messages:{        name: {            required:"请输入姓名！"        }    },    // 自定义报错信息元素名称    errorElement:"em",    // 自定义报错信息样式名称    errorClass:"my-error",    // 自定义报错信息位置    errorPlacement:function(error,element) {          error.appendTo(element.parent("td").next("td"));    }});

说明：

errorElement：

自定义报错信息元素名称，输入一个元素名称，报错文案就指定为这个元素

errorClass：

自定义报错信息样式名称，输入一个class name，则报错的input元素和报错文案元素会被添加上这个class

errorPlacement：

自定义报错信息位置，使用方式如代码示例