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

Question

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

第二种方法的优点是您可以向页面添加任意数量的名称、描述、费率和数量字段，并且无需更改即可对所有这些字段应用验证。两种方法都行得通，所以这只是选择最适合给定场景的一种情况。