使用基于元素的 AddMethod 动态 jQuery Validate 错误消息

Question

假设我有一个自定义 AddMethod 到 jQuery Validate，例如：

$.validator.addMethod('min-length', function (val, element) {
    // do stuff

// the error message here needs to be dynamic
}, 'The field cannot be less than than '
     + element.attr('data-min') + // it is within the closure, but it can't grab it
   ' length.');

我想不出一种方法来获取有问题的 element 变量，并从中获取任何值。我在这里错过了什么？

Answer 1

通过查看验证器源代码，我认为应该这样做：

$.validator.addMethod('min-length', function (val, element) {
    return this.optional(element) || val.length >= $(element).data('min');
}, function(params, element) {
    return 'The field cannot be less than than ' + $(element).data('min') + ' length.';
});

在您的原始代码中，消息字符串不在闭包内；闭包是addMethod的第二个参数，错误信息是第三个参数。

Answer 2

首先，我很欣赏 Barmar 的回答。

如果您只是想，您可以使用任何带有参数值的 jquery 验证消息，您可以简单地调用消息实例。

这里是代码

            jQuery.validator.addMethod("custom_min", function(value, element, param) {
                value = replaceAll(value, ',' , '');
                return this.optional( element ) || value >= param;
            },jQuery.validator.messages.min );  

在 jquery 验证中

jQuery('#form_id').validate({
   rules: {
    'field_name': {
       required: true,
       number: true,
       custom_min: 1000
   }
});

因此，如果您输入小于 1000 的值。它会抛出错误消息，“请输入大于 1000 的值（您在验证中输入的数量）”。如果您的验证需要任何修改，此方法会更快当前方法，或者您正在使用多种语言开发它。

Answer 3

如果 Barmar 的回答对您不起作用，可能是因为您对元素的设置已经包含错误消息（例如在 asp.net MVC 中从服务器设置）

因此 jQuery.validate 代码将忽略第二个参数为 $.validator.addMethod 设置的新默认值

解决方法是执行以下操作：

$.validator.addMethod('min-length', function (val, element) {
   this.settings.messages[element.name]['min-length'] = function () { return 'put your custom message here'; };

   return this.optional(element) || val.length >= $(element).data('min');
});

Answer 4

偶然发现了这个半成品。根据结果​​，我的消息非常动态。所以就在我调用 validate 之前，我向元素添加了一个属性 data-msg="My custom message"。验证者将接受它：

err_msg = 'My custom message';
$('#my_element_id').attr('data-msg', err_msg);
$('#my_form_id').validate().element('input[name=\'my_element_name\'');

在 jquery.validate.js 中的 customDataMessage 下找到了一些代码引用

Answer 5

在这里聚会迟到了，但这似乎对我有用：

jQuery.validator.addMethod("minDate", function(value, element, param) {
    var inputDate = new Date(value);
    return (inputDate >= param)
    }, function(param, element) {
        return 'Enter a date greater than or equal to ' + $.datepicker.formatDate("M d, yy", new Date(param));
});

先前已在控件上设置 minDate 值以验证如下内容：

$('form:first').validate({
    rules: {
        "date-filed": {
            minDate: new Date(2000,0,0)
        },
...

Answer 6

代码：

    $.validator.addMethod("strongePassword", function(value) {
        return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) && /[a-z]/.test(value) && /\d/.test(value) && /[A-Z]/.test(value);
    },"The password must contain at least 1 number, at least 1 lower case letter, and at least 1 upper case letter"); 
        

用于：

  rules: { 
        password: {
                    required: !0,
                    strongePassword: true
                 },
     }