如何使用addClassRules向类添加消息

在文档中,答案是将要调用的方法别名并添加自定义消息。

Check the reference

// alias required to cRequired with new message
$.validator.addMethod("cRequired", $.validator.methods.required,
"Customer name required");
// alias minlength, too
$.validator.addMethod("cMinlength", $.validator.methods.minlength, 
// leverage parameter replacement for minlength, {0} gets replaced with 2
$.format("Customer name must have at least {0} characters"));
// combine them both, including the parameter for minlength
$.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });

这可以通过下面的代码来实现,

  $.validator.messages.accept = 'File must be JPG, GIF or PNG';

    $.validator.addClassRules("files", {            
      accept : "png|jpe?g|gif",  
      filesize : 2000000
    });

无论如何,通过jQuery元数据分配消息,我可以为每个类定制它们。

class="amount {validate:
                {messages:
                  {required:'Amount is required',
                   range: 'Amount must be between 0 and 2,000,000',
                   digits: 'Amount must be numeric'}
                }
              }"

…以此类推我的网格行中的每个字段。

我将考虑扩展'addClassRules'方法来接受一个messages参数,但目前这是可行的。

既然每个人都对这个问题的答案很感兴趣,那么我接下来就要寻求答案了!

customClassMessage: function (element, method) {
    //Get the elements class(es)
    var classes = $(element).attr("class").split(" ");

    //return any message associated with said class and method
    var m = $.validator.messages[classes[0]];

    return m && (m.constructor == String
        ? m
        : m[method]);
},

defaultMessage: function (element, method) {
                return this.findDefined(
                this.customMessage(element.name, method),
                this.customMetaMessage(element, method),
                this.customClassMessage(element, method),
                // title is never undefined, so handle empty string as undefined
                !this.settings.ignoreTitle && element.title || undefined,
                $.validator.messages[method],
                "<strong>Warning: No message defined for " + element.name + "</strong>"
            );
            },

添加了“addClassMessages”方法

        addClassMessages: function (className, messages) {
        if (className.constructor == String) {
            $.validator.messages[className] = messages != undefined ? messages : $.validator.messages[className];
        }
        else {
            $.extend(this.messages, className);
        }
    },

我还没有弄清楚如何在插件之外附加这些附加方法。不过,至少我不必在“class”属性中声明错误消息。

jQuery.validator.addClassMessages({
    amount: {
        required: "Amount is required",
        range: "Amount must be between 0 and 2,000,000",
        digits: "Amount must be numeric"
    }
});

使用 使用您喜欢的元素进行验证

<select name="account1" data-msg-required="Please select an account">
<option value="">--Select Account--</option>
<optgroup label="100-Assets">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
</optgroup>

建议的答案需要编写自定义方法或常见错误消息,有时不容易自定义。下面一个是我的作品中提到的 github issue tracker :

$.validator.addClassRules = function (className, rules) {

    if (className.constructor === String) {
        var obj = {};
        obj[className] = rules;
        className = obj;
    }

    $.each(className, function (n, r) {
        $("." + n).each(function (i, e) {
            var self = $(e)
            self.rules('add', r);
        });
    });

}

$.validator.addClassRules({
    'firstname': {
        required: true,
        messages: {
            required: "First name is required"
        }
    }
});

试试这个:

jQuery.validator.addClassRules({
    amount: {
        required: true,
        range: [0, 2000000],
        messages: {required: "Required field!", range: "Invalid range!"}
    },
    comment: {
        maxlength: 51,
        messages: {maxlength: "Max 51 characters!"}
    }
})

我想这就是你要找的,对吗?