jQuery Validation Plugin - добавление правил, которые применяются к нескольким полям

Question

Я использую плагин проверки jQuery:

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

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

$('#affiliate_signup').validate(
       {
          rules: 
          {
            email: {
                required: true,
                email: true
            },
            first_name,last_name: {
                required: true
            },
            password: {
                required: true,
                minlength: 4
            }
          }
       });

Заранее спасибо.

Answer 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

---

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

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

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

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

---

Вариант 1b) Относится к пункту 1а выше, но в зависимости от вашего уровня сложности, может выделить правила, которые являются общими для определенных групп, и использовать .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/

---

Вариант 2а) Вы можете назначать классы своим полям на основе желаемых общих правил, а затем назначать эти правила классам. С использованием 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) Основное отличие от варианта 2а состоит в том, что вы можете использовать это для назначения правил динамически создаваемым элементам ввода, вызывая 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/

---

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

• rules('add') метод

• addClassRules метод

Answer 2

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

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

        first_name: {
            required: true
        },

        get last_name() {return this.first_name},

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

Answer 3

Если я вас правильно понял, вы хотите применить много правил ко многим полям, которые могут отличаться в некоторых правилах, но вам лень повторять те же правила для других полей. Тем не менее, с помощью jQuery validate можно иметь более одного правила в одном поле ввода. Просто используйте обозначение массива здесь.

Чтобы добиться вашего варианта использования, просто добавьте data атрибуты для каждого поля ввода с правилами, которые вы хотите применить к нему. В лучшем случае используйте формат json в кодировке URL, так что вам нужен только один data атрибут для каждого поля ввода. Е. г.:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validate test</title>
</head>
<body>
<form id="myForm" name="myForm" method="post" action="www.example.com/my-url">
    <input type="text" name="txt1" data-rules="%7B%22required%22%3Atrue%2C%22minlength%22%3A2%2C%22maxlength%22%3A10%7D" />
    <input type="text" name="txt2" data-rules="%7B%22required%22%3Atrue%2C%22minlength%22%3A2%2C%22maxlength%22%3A10%7D" />
    <input type="number" name="number1" data-rules="%7B%22required%22%3Atrue%2C%22number%22%3Atrue%2C%22min%22%3A1%2C%22max%22%3A999%7D" />
    <input type="email" name="email1" data-rules="%7B%22required%22%3Atrue%2C%22email%22%3Atrue%2C%22minlength%22%3A20%7D" />
    <input type="email" name="email2" data-rules="%7B%22required%22%3Atrue%2C%22email%22%3Atrue%2C%22minlength%22%3A20%7D" />
</form>
<script type="text/javascript">
    var $field = null;
    var rules = {};

    $('#myForm input, #myForm textarea').each(function (index, field) {
        $field = $(field);
        rules[$field.attr('name')] = JSON.parse(decodeURIComponent($field.attr('data-rules')));
    });

    $('#myForm').validate(rules);
</script>
</body>
</html>

Основная технология этого проста:

1. Создайте свои поля с атрибутом `data-``.
2. Зацикливайтесь на каждом поле ввода, чтобы получить правила, которые вы хотите применить к нему.
3. Примените собранные вами правила к элементу формы

Вы также можете использовать входные группы с теми же валидаторами, например, используя классы для него и предопределенные переменные JavaScript с объектом rules. Я думаю, у вас есть идея, как изящно лениться;-)