将相同的 JQuery Validate 规则两次添加到动态字段是否不正确，是否有害？

Question

我的表单上有大量动态克隆字段。这些字段是克隆组。

每次添加克隆时，我都会使用通配符选择器将规则分配给 DOM 中的所有字段。

        $('[name^=myfieldname]').each(function() {
            $(this).rules('add',{
                    required: true,
                    duplicatefield: true,
                messages: {
                    required: "Myfieldname is required",
                    duplicatefield: "Myfieldname can not be duplicated"
                }
            });
        });

我这样做的原因是，我可以在每次添加克隆或重新索引时调用一个函数，以确保 DOM 中的所有字段都具有正确的规则。

这样做的结果是我将多次将该规则分配给任何预先存在的字段。

这样做是否不正确？jQuery 是否会忽略重复（添加）的规则或只是覆盖它？

Answer 1

将相同的 jQuery 验证规则多次添加到动态字段在技术上并不是不正确，但它可能效率低下，并且可能会导致意外的行为或性能问题。

为了确保有效且正确地添加验证规则，请考虑以下最佳实践：

function initializeValidationForField(field) {
    // Check if the field already has the rule
    var currentRules = $(field).rules('remove'); // Temporarily remove to inspect
    $(field).rules('add', currentRules); // Add back the old rules

    // Add new rules if they don't already exist
    if (!currentRules.required) {
        $(field).rules('add', {
            required: true,
            messages: {
                required: "Myfieldname is required"
            }
        });
    }

    if (!currentRules.duplicatefield) {
        $(field).rules('add', {
            duplicatefield: true,
            messages: {
                duplicatefield: "Myfieldname can not be duplicated"
            }
        });
    }
}

function applyValidationRules() {
    $('[name^=myfieldname]').each(function() {
        initializeValidationForField(this);
    });
}

// Apply rules to all fields initially
applyValidationRules();

// When cloning a new field
$(document).on('click', '.clone-button', function() {
    var newField = cloneField(); // Implement this function to clone your field
    applyValidationRules(); // Only for the new field(s)
});

1. 多次添加相同的规则可能会导致效率低下和潜在问题。
2. 使用检查以避免重新添加现有规则。
3. 仅针对新的或相关的字段来有效应用规则。
4. 考虑使用自定义函数来管理规则初始化和 重新申请。