Это третья часть серии «Понимание ненавязчивой проверки в ASP.Net MVC».
1. Работа с плагином проверки jQuery изнутри 2. Понимание HTML-кода, созданного путем ненавязчивой проверки в ASP.Net MVC. 3. Внутренняя работа ненавязчивого плагина проверки jQuery в ASP.Net MVC. О чем мы поговорим в этой статье:
- метод «разбора»
- раздел "parceElement"
- объяснение параметра «skipAttach»
- объяснение функции «parceElement»
- раздел «validateInfo»
- объяснение функции validateInfo
- объяснение объекта «возврата»
- раздел "parceElement"
- Адаптеры
метод «разбора»
Мы объясним ненавязчивый цикл проверки, который происходит при загрузке документа, и поймем роль каждого компонента.Если мы посмотрим в конец jquery.validate.unobtrusive.js, мы найдем
Итак, мы вызываем метод «parse()» и передаем ему «документ».$(function () { $jQval.unobtrusive.parse(document); });
Что такое метод «parse()»? {
parse: function (selector) {
///
<summary>
/// Parses all the HTML elements in the specified selector. It looks for input elements decorated
/// with the [data-val=true] attribute value and enables validation according to the data-val-*
/// attribute values.
/// </summary>
///Any valid jQuery selector.
$(selector).
find(":input[data-val=true]").
each(function () { $jQval.unobtrusive.parseElement(this, true); }); var $forms = $(selector) .
parents("form") .
andSelf() .
add($(selector).
find("form")) .
filter("form");
$forms.each(function () {
var info = validationInfo(this);
if (info) {
info.attachValidation();
}
});
}
}
Метод parse() состоит из двух разделов.
1. Раздел «Элемент посылки»
parseElement (элемент, пропуститьAttach) $(selector).
find(":input[data-val=true]").
each(function () {
$jQval.unobtrusive.parseElement(this, true);
});
Первое, что происходит, это перебираем все элементы, содержащие «data-val=true» в передаваемом селекторе (в нашем случае «document»).
Затем мы вызываем «parseElement()» и передаем ему элемент, который хотим проверить, и «истину» для «skipAttach».
Пояснение параметра «skipAttach» Кто-то может задаться вопросом, почему мы передаем true, а не false в «skipAttach».
«skipAttach» — это флаг для вызова «validate()» в форме.
Если мы передаем «false», правила проверки прикрепляются к элементу, который мы передаем, и метод «validate» немедленно вызывается для массива правил, и передаются другие параметры, необходимые для ненавязчивой проверки (если есть какой-либо другой элемент, который они собирают разобрать).
Мы не хотим этого.
Прежде всего, мы хотим прикрепить правила к каждому элементу формы, а затем, когда все правила будут прикреплены, мы вызовем «validate()», основной во второй части метода «parse».
В каких случаях нам нужно передавать «true» в «skipAttach»? Если мы хотим добавить динамический элемент в уже проверенную форму, мы передадим «true», чтобы нам не приходилось проверять форму еще раз, потому что мы не хотим, чтобы что-либо произошло (мы поговорим о проверка динамического элемента в следующей статье) Пояснение функции «parseElement» По сути, функция parseElement() делает две вещи: 1. Когда элемент формы вызывается в первый раз (ни один элемент в этой форме ранее не вызывался), функция создает объект параметров, который будет передан в метод «validate()».
Параметры используются jquery.unobtrusive как отдельная функция errorPlacement, отдельный errorClass и как пустой массив правил.
Примечание: все это можно сделать в частном методе «validationInfo(form)», который вызывается без «parseElement», и при вызове более 1 раза он просто возвращает один и тот же объект. Таким образом, мы можем добавлять, изменять или вызывать в нем данные/функции.
2. Для каждого элемента, когда мы вызываем «parseElement», он понимает правила, записанные в этом элементе («данные-*»), используя адаптеры (далее есть параграф, объясняющий, как работают адаптеры), а затем преобразует и добавляет их в массив правил, который был создан при первом вызове.
Примечание.
Каждый раз, когда осуществляется доступ к «parseElement», его результат будет сохранен в форме с использованием метода $.
data («unobtrusiveValidation»).
Таким образом, отдельные вызовы синхронизируются с одним и тем же источником данных.
2. Раздел «validateInfo».
var $forms = $(selector)
.
parents("form") .
andSelf() .
add($(selector).
find("form")) .
filter("form");
$forms.each(function () {
var info = validationInfo(this);
if (info) {
info.attachValidation();
}
});
Пояснение функции «validateInfo»
Мы уже упоминали, что вызов функции «validateInfo()» создает объект параметров для метода «validate()».
Эти параметры используются jquery.unobtrusive как отдельная функция errorPlacement, отдельный errorClass и пустой массив правил.
Здесь мы также вызываем «validateInfo()» для каждой формы на странице.
Обычно, вызывая на этом этапе «valaidateInfo», мы получаем только объект, хранящийся в форме, которая уже была заполнена на первом этапе.
То есть мы используем его как «добытчик».
Затем мы вызываем «attachValidation()», который вызывает метод «validate()», передавая ему параметры, заполненные вызовом «validationInfo()».
data_validation = "unobtrusiveValidation";
function validationInfo(form) {
var $form = $(form),
result = $form.data(data_validation),
onResetProxy = $.
proxy(onReset, form); if (!result) { result = { options: { // options structure passed to jQuery Validate's validate() method errorClass: "input-validation-error", errorElement: "span", errorPlacement: $.
proxy(onError, form), invalidHandler: $.
proxy(onErrors, form), messages: {}, rules: {}, success: $.
proxy(onSuccess, form) }, attachValidation: function () { $form .
unbind("reset." + data_validation, onResetProxy) .
bind("reset." + data_validation, onResetProxy) .
validate(this.options);
},
validate: function () { // a validation function that is called by unobtrusive Ajax
$form.validate();
return $form.valid();
}
};
$form.data(data_validation, result);
}
return result;
}
Сначала мы проверяем, вызывали ли мы уже эту функцию в форме перед использованием $form.data(“unobtrusiveValidation”).
Если он уже был вызван, то ничего не делаем и возвращаем результат. Пояснение объекта «возврат».
Если это первый вызов функции «validationInfo()», то мы создаем объект результата и сохраняем его в форме с помощью метода $.
data().
Этот объект состоит из 3 частей:
- Объект, который мы передадим методу «validate()» с пустым массивом правил и сообщений, который мы создадим позже.
- Метод «attachValidation()», который прикрепит к форме собственное событие «reset.unobtrusiveValidation», и после вызова «validate» метода со всеми параметрами этот метод будет вызываться, когда массив правил и сообщений будет заполнен.
(вызывая собственное событие «сброса», мы вызовем метод «onReset()», который все сбрасывает).
function onReset(event) { // 'this' is the form element var $form = $(this); $form.data("validator").resetForm(); $form.find(".
control-group").
removeClass("error"); $form.find(".
validation-summary-errors") .
addClass("validation-summary-valid") .
removeClass("validation-summary-errors"); $form.find(".
field-validation-error") .
addClass("field-validation-valid") .
removeClass("field-validation-error") .
removeData("unobtrusiveContainer") .
find(">*") // If we were using valmsg-replace, get the underlying error .
removeData("unobtrusiveContainer");
Итак, если мы хотим вызвать событие «сброс» для сброса проверки формы:$('form').trigger('reset.unobtrusiveValidation')
- Из ненавязчивого Ajax будет вызываться отдельный метод validate().
Адаптеры
Я намеренно пропустил тему адаптеров, когда говорил о методе parseElement(), поскольку они достаточно сложны, чтобы посвятить им отдельный подраздел.Мы рассмотрели, как генерируется HTML с помощью ненавязчивой проверки и как добавлять отдельные атрибуты проверки в обычный jquery.validate. Для соединения этих двух частей используются переходники.
Итак, за что же отвечают адаптеры? Адаптеры отвечают за перевод Html «data-*» в формат, понятный обычному плагину jquery.validate. Если пользователь хочет добавить отдельный метод проверки с использованием ненавязчивой проверки, он также должен создать для него адаптер.
Коллекция адаптеров находится в $.
validator.unobtrusive.adapters. Коллекция адаптеров состоит из всех адаптеров по умолчанию, определенных в jquery.unobsrusive, а также адаптеров, определенных пользователем.
Он также содержит 4 метода добавления собственного адаптера, которые мы рассмотрим позже.
Самый простой метод: jQuery.validator.unobtrusive.adapters.add(имяадаптера, [параметры], fn)
Мы можем думать об этом методе как о методе $.
ajax, остальные три вспомогательных метода используют этот метод. Давайте посмотрим на параметры:
- имя адаптера: это имя адаптера, оно совпадает с «ruleName» в элементе Html (data-val-ruleName).
- [params]: необязательный массив параметров, который метод проверки будет использовать для завершения проверки.
- fn: вызывается для соединения Html «data-*» с правилами и сообщениями, которые используются методом «validate()».
У него есть опция параметров, которые передаются ему как объект со следующими свойствами:
- элемент: проверенный HTML-элемент;
- форма: элемент формы;
- message: сообщение об ошибке для этого правила, извлеченное из атрибутов «data-*» этого элемента;
- params: параметры, которые используются для проверки, и их массив, извлеченный из атрибутов «data-*» элемента Html (data-val-ruleName-param1);
- Rules: массив правил jQuery для этого элемента.
Чтобы добавить правило(а) в этот массив, мы передадим пары ключ/значение, ключ — это имя правила проверки, значение — это параметр, используемый для этого правила (как написано в первой статье серии в параграф «Добавление собственных правил валидации»)
- messages: массив сообщений jquery для этого элемента, как и в случае с объектом правил, мы заполняем его, и он используется как объект сообщений для этого элемента Html в методе «validate».
Примечание.
Этот метод не возвращает никакого результата.
Массив правил и сообщений будет сохранен в самой форме с помощью $.
data("unobtrusiveValidation").
Мы можем проверить метод «parseElement», чтобы подробно увидеть, как параметры были переданы в функцию адаптера.
<input id="val" type="text" name="val" data-val="true" data-val-between="Must be in the right range" data-val-between-min="5" data-val-between-max="30" />
JavaScript
//The adapter
jQuery.validator.unobtrusive.adapters.add(
'between', ['min' ,'max'], function (options) {
options.rules['between'] = {
min: options.params.min,
max: options.params.max
};
options.messages['between'] = options.message;
}
);
//The validation method
jQuery.validator.addMethod("between", function (value, element, params) {
params.min == 5; //true
params.max == 30; //true
});
А как насчет других адаптеров: addBool добавитьсинглвал добавитьминмакс Они довольно просты, если вы поймете концепцию добавления собственного адаптера с помощью метода «add()», описанного ранее.
Вы также можете посмотреть статью Брэд Уилсон «Ненавязчивая проверка клиента в ASP.NET MVC 3» , где он более подробно объясняет тему адаптеров.
Перевод статьи Надима Хедра Как ненавязчивый плагин проверки jQuery работает внутри Asp.net MVC обновление: добавлена картинка со списком адаптеров и ссылками на другие посты серии Теги: #asp.net mvc #плагины jquery #переводы #JavaScript #.
NET #ASP #ASP
-
Devuan, Форк Debian Без Systemd
19 Oct, 24 -
Видео С Конференции Linux Lvee2009
19 Oct, 24 -
Как Работает Штрих-Код?
19 Oct, 24 -
Альфа-Версия Cms Drag&Drop
19 Oct, 24
