jQuery Validation Plugin

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：

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