Question

我正在使用jQuery验证插件，并且有一些需要不同规则的表单，而不是像下面那样再次写出相同的代码

if (jQuery().validate) {
    var removeSuccessClass = function(e) {
        $(e).closest('.form-group').removeClass('has-success');
    }

    $('#validation-form').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        focusInvalid: false, // do not focus the last invalid input
        ignore: ":hidden:not(.chosen)",

        invalidHandler: function (event, validator) { //display error alert on form submit              

        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
            setTimeout(function(){removeSuccessClass(element);}, 3000);
        },

        submitHandler: function(form){
            $('#save').hide();
            $('#saving').show();
            form.submit();
        }
    });

    $('#validation-form-pdf-word').validate({
        rules: {
            file: {
                extension: "pdf|doc|docx"
            }
        },
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        focusInvalid: false, // do not focus the last invalid input
        ignore: ":hidden",

        invalidHandler: function (event, validator) { //display error alert on form submit              

        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
            setTimeout(function(){removeSuccessClass(element);}, 3000);
        },

        submitHandler: function(){
            $('#save').hide();
            $('#saving').show();
            form.submit();
        }
    });

    $('#validation-form-pdf').validate({
        rules: {
            file: {
                required: true,
                extension: "pdf"
            }
        },
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        focusInvalid: false, // do not focus the last invalid input
        ignore: ":hidden",

        invalidHandler: function (event, validator) { //display error alert on form submit              

        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
            setTimeout(function(){removeSuccessClass(element);}, 3000);
        },

        submitHandler: function(){
            $('#save').hide();
            $('#saving').show();
            form.submit();
        }

    });
}

我想拥有它，所以我可以通过类似的东西传递其余的规则

if (jQuery().validate) {
    var removeSuccessClass = function(e) {
        $(e).closest('.form-group').removeClass('has-success');
    }

    $('#validation-form').validate({
        theRules
    });

    $('#validation-form-pdf-word').validate({
        rules: {
            file: {
                extension: "pdf|doc|docx"
            }
        },
        theRules
    });
}

Answer 1

您无法在同一表单上多次拨打.validate()。它只用于表单上插件的初始化，任何后续调用都会被忽略。

如果您尝试将常用选项合并到一个对象中以便在多个表单中使用，请使用.setDefaults()方法。

jQuery.validator.setDefaults({
    rules: {
        ....
    },
    messages: {
        ....
    },
    // other options, etc.
});

<强> Documentation

否则，您可以简单地将常用规则分配到变量中并像这样使用它们......

var theRules = {
    required: true,
    number: true
};


$('#validation-form').validate({
    rules: {
        fieldname: theRules
    }
});

$('#validation-form-pdf-word').validate({
    rules: {
        file: {
            extension: "pdf|doc|docx"
        },
        anotherfield: theRules
    }
});

参考选项2：https://stackoverflow.com/a/9461732/594235

DEMO：http://jsfiddle.net/K37jL/

根据评论编辑：

jQuery.validator.setDefaults({
    // all options, etc.  - highlight, success, submitHandler, etc.
});

$('#validation-form').validate({
    // your rules for this form
});

$('#validation-form-pdf-word').validate({
    // your rules for this form
});

试图重构这段代码

1 个答案: