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

IT技术 javascript jquery jquery-validate
2021-02-12 11:33:37

假设我有一个自定义的 AddMethod 到 jQuery 验证,例如:

$.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.');

我想不出一种方法来获取有问题元素变量,并从中获取任何值。我在这里错过了什么?

6个回答

从查看验证器源代码,我认为应该这样做:

$.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,错误信息是第三个参数。

另外一个补充是,如果在其他地方定义了一条消息,例如在规则集上,第三个参数 toaddMethod将被忽略。我认为验证器会首先使用参数,然后使用默认值 ifnull或一个空字符串被返回。
2021-03-16 11:33:37
非常感谢巴马尔!不知道你可以这样做:) 另外你是对的,它不在关闭中,我的错误。
2021-03-20 11:33:37
正是我要找的。更进一步,您可以在验证函数中构造一个自定义错误消息,并将其存储在元素的数据中,例如$(element).data('error','... custom message ...'),然后通过在消息函数中恢复它return $(element).data('error')
2021-04-05 11:33:37
@Barmar:params第三个论点会发生什么我试过console.log( params );和它的打印true这个论据从何而来?
2021-04-11 11:33:37
element不是 jQuery 对象。需要变成一体吗?
2021-04-12 11:33:37

首先,我很欣赏 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 的值(您在验证中输入的数量)”。如果您的验证需要对任何当前方法进行任何修改或您正在使用多种语言开发它。

我赞成您的回答,因为它确实解决了问题中的示例,但 Barmar 的回答提供了更通用的解决方案,这正是我进入此页面时所寻找的。
2021-04-05 11:33:37

如果 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');
});
ValidationAttribute在 C# 属性 (MVC) 上设置了自定义错误- 我无法在不影响其他项目的情况下更改此属性,因此此答案是唯一对我有用的方法。这个答案值得更多赞!
2021-04-12 11:33:37

偶然发现了这个半。根据结果​​,我的消息非常动态。所以就在我调用 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 下找到了一些代码引用

晚到这里参加聚会,但这似乎对我有用:

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)
        },
...