Question

我有一系列表示Items的输入字段。相应的html看起来像：

<input type="text" name="items[][name]" id="items__name" value="" class="form-control">
<input type="text" name="items[][description]" id="items__description" value="" class="form-control">
<input type="text" name="items[][rate]" id="items__rate" value="" class="form-control calc">
<input type="text" name="items[][quantity]" id="items__quantity" value="" class="form-control calc">

现在用户可以添加项目。为此，我只是克隆上面字段的包装，并在最后一个项目表中添加。

所以，现在我有一系列新添加的文本字段。引用为textFields，我需要添加验证规则。我正在使用jQuery Validator进行验证。

我的代码如下：

           $(textFields[0]).rules('add', {
                required: true,
                messages: {
                    required: I18n.t('orders.itemNameRequired')
                }
            });

            $(textFields[1]).rules('add', {
                required: true,
                messages: {
                    required: I18n.t('orders.itemDescriptionRequired')
                }
            });

            $(textFields[2]).rules('add', {
                required: true,
                number: true,
                messages: {
                    required: I18n.t('orders.itemRateRequired'),
                    number: I18n.t('orders.itemRateInvalid')
                }
            });

            $(textFields[3]).rules('add', {
                required: true,
                number: true,
                messages: {
                    required: I18n.t('orders.itemQuantityRequired'),
                    number: I18n.t('orders.itemQuantityInvalid')
                }
            });

现在，它运作正常。但有没有办法通过使用循环或将规则存储在哈希或类似的地方来干掉它？想不出办法。需要第二个人的观点!!!

提前致谢。

Answer 1

我个人会做这样的事情来整理代码...

function addRule(element, number, messages) {
    $(element).rules("add", {
        required: true,
        number: number,
        messages: messages
    });
}

addRule(textFields[0], false, {
    required: I18n.t('orders.itemNameRequired')
});

addRule(textFields[1], false, {
    required: I18n.t('orders.itemDescriptionRequired')
});

addRule(textFields[2], true, {
    required: I18n.t('orders.itemRateRequired'),
    number: I18n.t('orders.itemRateInvalid')
});

addRule(textFields[3], true, {
    required: I18n.t('orders.itemQuantityRequired'),
    number: I18n.t('orders.itemQuantityInvalid')
});

但是，对于您提供以下脚本的html，将根据这些字段的要求添加规则......

$("input[name]").each(function() {
    var rule = {
        required: true,
        messages: {}
    };

    if (this.name.match("[name]").length) {
        rule.messages.required = I18n.t('orders.itemNameRequired');
    }
    else if (this.name.match("[description]").length) {
        rule.messages.required = I18n.t('orders.itemDescriptionRequired');
    }
    else if (this.name.match("[rate]").length) {
        rule.number = true;
        rule.messages.required = I18n.t('orders.itemRateRequired');
        rule.messages.number = I18n.t('orders.itemRateInvalid');
    }
    else if (this.name.match("[quantity]").length) {
        rule.number = true;
        rule.messages.required = I18n.t('orders.itemQuantityRequired');
        rule.messages.number = I18n.t('orders.itemQuantityInvalid');
    }

    $(this).rules("add", rule);
});

第二种方法的优点是您可以在页面中添加任意数量的名称，描述，速率和数量字段，并将验证应用于所有这些字段，而无需进行更改。这两种方法都可行，所以这只是选择哪一种最适合给定方案的情况。

Answer 2

不会显着减少代码行，但您可以使用规则配置对象的数组并循环遍历元素以从数组中添加。如果需要，它将允许业务逻辑和配置数据的某些分离

var fieldOpts = [{
    messages: {
        required: I18n.t('orders.itemNameRequired')
    }
}, {    
    messages: {
        required: I18n.t('orders.itemDescriptionRequired')
    }
}, {    
    number: true,
    messages: {
        required: I18n.t('orders.itemRateRequired'),
        number: I18n.t('orders.itemRateInvalid')
    }
}, {    
    number: true,
    messages: {
        required: I18n.t('orders.itemQuantityRequired'),
        number: I18n.t('orders.itemQuantityInvalid')
    }
}]

$(textFields).each(function(i){
    var rules = fieldOpts[i];
    rules.required=true; // common to all so am adding here instead of in array
    $(this).rules('add',rules)
});

另请注意，如果需要所有字段，则可以在元素上添加required属性

Answer 3

它工作正常，但您需要在输入字段的属性中存储i18n条消息。喜欢

<input name="my_field" data-i18n-number-messages="This is a required field" />

<input name="my_field" data-i18n-required-messages="This is a required field" data-i18n-number-messages="This is a required field" />
由于您要克隆预先存在的字段，因此只需在编译时/后端添加一次消息。

代码：

function addRule(targetHash){
        $.each(targetHash, function (element, options){
            var $element = $('input[name="' + element + '"]');
            var methods = {}
            var messages = {}
            $.each(options, function(method, trueFalse){
                methods[method] = trueFalse;
                if (trueFalse){
                    messages[method] = $element.attr('data-i18n-' + method + '-messages');
                }
            });
            var rules = $.extend({}, methods, {messages: messages});
            console.log(rules);
            $element.rules('add', rules);
        });
    }

    addRule({
        // textFields[3] should be the name of the fields
        'textFields[3]': {required: true, number: true},                
        'textFields[4]': {required: true}
    });

Answer 4

将类提供给数字字段让我们说它是数字字段。这里只是伪代码。

$("#input-container :input").each(function(){

  if(this.hasClass('numeric-field'){
    this.rules('add', {
            required: true,
            number: true,
            messages: {
                required: I18n.t('orders.itemRateRequired'),
                number: I18n.t('orders.itemRateInvalid')
            }
        });
   }
 else{
      this.rules('add', {
            required: true,
            messages: {
                required: I18n.t('orders.itemDescriptionRequired')
            }
        });
     }
});

自动化一系列类似的操作

4 个答案: