Для моего примера это базовый начальный код:
HTML:
<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_3" />
JS:
$('#myForm').validate({
rules: {
field_1: {
required: true,
number: true
},
field_2: {
required: true,
number: true
},
field_3: {
required: true,
number: true
}
}
});
DEMO : http://jsfiddle.net/rq5ra/
ПРИМЕЧАНИЕ. Независимо от того, какая методика ниже используется для назначения правил, плагину необходимо, чтобы каждый элемент имел уникальный name
атрибут.
Вариант 1a) Вы можете назначать классы своим полям на основе желаемых общих правил и затем назначать эти правила классам.Вы также можете назначить пользовательские сообщения.
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" />
Метод .rules()
должен вызываться после , вызывая .validate()
JS:
$('#myForm').validate({
// your other plugin options
});
$('.num').each(function() {
$(this).rules('add', {
required: true,
number: true,
messages: {
required: "your custom message",
number: "your custom message"
}
});
});
DEMO : http://jsfiddle.net/rq5ra/1/
Опция 1b) То же, что и выше, но вместо использованияclass
, соответствует общей части атрибута имени:
$('[name*="field"]').each(function() {
$(this).rules('add', {
required: true,
number: true,
messages: { // optional custom messages
required: "your custom message",
number: "your custom message"
}
});
});
DEMO : http://jsfiddle.net/rq5ra/6/
Вариант 2a) Вы можете извлечь группы правил и объединить их в общие переменные.
var ruleSet1 = {
required: true,
number: true
};
$('#myForm').validate({
rules: {
field_1: ruleSet1,
field_2: ruleSet1,
field_3: ruleSet1
}
});
DEMO : http://jsfiddle.net/rq5ra/4/
Вариант 2b) Относится к пункту 2a выше, но в зависимости от вашего уровня сложности, может выделить правила, общие для определенных групп, и использовать .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
var ruleSet3 = { };
$.extend(ruleSet3, ruleSet1, ruleSet2); // combines sets 2 & 1 into set 3. Defaults are included since they were already combined into sets 1 & 2 previously.
$('#myForm').validate({
rules: {
field_1: ruleSet2,
field_2: ruleSet_default,
field_3: ruleSet1,
field_4: ruleSet3
}
});
Конечный результат:
field_1
будет требуемым числом не менее 3. field_2
будет просто необходимым числом. field_3
будет обязательным числом, не более99. field_4
будет необходимым числом от 3 до 99.
DEMO : http://jsfiddle.net/rq5ra/5/