javascript - 自动化一系列类似的操作

我有一系列表示项目的输入字段。相应的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">

现在，用户可以添加项目。为此，我只需克隆以上字段的包装，然后在items表的最后添加即可。

因此，现在我有了一系列新添加的文本字段。引用为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')
                }
            });

现在，它工作正常。但是，有没有一种方法可以通过使用循环或将规则存储在散列或类似的地方来使其干燥？想不到办法。需要第二个人的观点!!!

提前致谢。

最佳答案

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

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);
});

第二种方法的优点是您可以在页面上添加任意数量的名称，描述，费率和数量字段，并且无需更改即可将验证应用于所有字段。无论哪种方法都行得通，因此只是选择最适合给定方案的一种情况。