Плагин проверки jQuery - добавление правил, применимых к нескольким полям

У меня есть несколько полей в большой форме, к которым я хочу применить те же правила. Я упростил код для этого примера. Этот код не работает, но я хочу сделать что-то подобное. Второе правило должно применяться как к first_name, так и к last_name. Я хочу инкапсулировать все правила здесь в этой функции и не редактировать списки классов некоторых элементов формы, чтобы добавить необходимый класс или что-то еще.

(Опять же, у меня есть несколько разных групп полей формы с разными требованиями, которые я хочу сгруппировать. Я просто поместил required: true в этот элемент для простоты)

Ответы

Ответ 1

Для моего примера это базовый стартовый код:

HTML:

<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_3" />

JQuery

$('#myForm').validate({
    rules: {
        field_1: {
            required: true,
            number: true
        },
        field_2: {
            required: true,
            number: true
        },
        field_3: {
            required: true,
            number: true
        }
    }
});

http://jsfiddle.net/9W3F7

Вариант 1a) Вы можете вывести группы правил и объединить их в общие переменные.

var ruleSet1 = {
        required: true,
        number: true
    };

$('#myForm').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

http://jsfiddle.net/9W3F7/1

Вариант 1b) Связанный с 1a выше, но в зависимости от вашего уровня сложности, можно разделить правила, общие для определенных групп, и использовать .extend(), чтобы рекомбинировать их бесконечным числом способов.

var ruleSet_default = {
        required: true,
        number: true
    };

var ruleSet1 = {
        max: 99
    };
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1

var ruleSet2 = {
        min: 3
    };
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2

$('#myForm').validate({
    rules: {
        field_1: ruleSet2,
        field_2: ruleSet_default,
        field_3: ruleSet1
    }
});

Конечный результат:

field_1 будет обязательным числом не менее 3.
field_2 будет просто обязательным числом.
field_3 будет обязательным числом не более 99.

http://jsfiddle.net/9W3F7/2

Вариант 2a). Вы можете назначать классы для своих полей на основе желаемых общих правил, а затем назначать эти правила для классов. Используя метод addClassRules, мы принимаем сложные правила и превращаем их в имя класса.

HTML:

<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />

JQuery

$('#myform').validate({ // initialize the plugin
    // other options
});

$.validator.addClassRules({
    num: {
        required: true,
        number: true
    }
});

http://jsfiddle.net/9W3F7/4/

Вариант 2b) Основное отличие от опции 2a заключается в том, что вы можете использовать это для назначения правил динамически созданным входным элементам, вызвав метод rules('add') сразу после их создания. Вы можете использовать class в качестве селектора, но это не требуется. Как вы можете видеть ниже, мы использовали селектор подстановочных знаков вместо class.

Метод .rules() должен вызываться в любое время после вызова .validate().

JQuery

$('#myForm').validate({
    // your other plugin options
});

$('[name*="field"]').each(function() {
    $(this).rules('add', {
        required: true,
        number: true
    });
});

http://jsfiddle.net/9W3F7/5/

Документация:

Ответ 2

Вы можете использовать синтаксис "getter" следующим образом:

   {
      rules: 
      {
        email: {
            required: true,
            email: true
        },

        first_name: {
            required: true
        },

        get last_name() {return this.first_name},

        password: {
            required: true,
            minlength: 4
        }
      }
   }