Слияние кода завершено, страница обновится автоматически
ZHH.validate.js — это плагин для веб-приложений, который позволяет проверять поля форм. Он предоставляет удобные API для настройки параметров проверки и не требует написания кода JavaScript для большинства функций.
Плагин легко расширяется и поддерживает как глобальные предустановленные правила, так и пользовательские настройки. Он также позволяет настраивать проверку для отдельных полей и групп полей.
Проверка может запускаться автоматически или вручную.
Существует множество фреймворков для проверки форм, но у каждого есть свои преимущества и недостатки. Поэтому был создан проект ZHH.validate.js с целью обеспечить поддержку API данных, простую и понятную конфигурацию, возможность объединять и группировать сообщения об ошибках, а также лёгкость расширения правил проверки.
Проект сравнивается с другими фреймворками:
Основой является форма <form>, а каждая группа class="vld-line" или class="form-group" представляет собой единицу проверки. Это может быть поле формы, такое как имя пользователя, пароль или адрес электронной почты.
Правила проверки настраиваются с помощью атрибута data-vld в полях ввода. Если атрибут label можно получить автоматически, то правило можно записать в сокращённом виде:
<input data-vld="{ label:'登录账号', rules:[ {required:true}, {length:[4,10]}, ... ] }" />
Если есть только одно правило, его можно ещё больше сократить:
<input data-vld="required:true" /> // обязательное поле
<input data-vld="regexp:'mobile'" /> // проверка на соответствие регулярному выражению мобильного номера
По умолчанию поддерживаются такие типы проверки, как обязательность, длина, регулярное выражение, сравнение, AJAX и проверка пароля.
В сообщениях об ошибках заполнитель {label} представляет текст метки для проверяемой единицы. Текст метки можно автоматически найти в классе vld-label или control-label.
Пример: {label}= логин.
<label class="vld-label">Логин</label><input type="text" data-vld="[...]" />
Также можно указать текст метки явно, используя атрибут data-vld:
<label class="vld-label">Логин</label><input type="text" data-vld="{ label:'Логин', rules:[...] }" />
<form class="vld-form form-horizontal">
<div class="control-group vld-line">
<label class="control-label"><span class="asterisk">*</span> Логин</label>
<div class="controls">
<input class="span3" type="text" name="account"
data-vld="[ {required:true}, {length:[4,10]}, {regexp:'ascii'}, {regexp:'illegal-char'}, {ajax:'demo/ajax.txt',options:{type:'GET',dataType:'text'},text:'Пользователь уже существует'} ]" />
<span class="help-inline">
<i class="vld-tips">4-10 цифр или букв</i>
</span>
</div>
<div class="controls">
<p>Обязательное поле, 4-10 символов, без китайских иероглифов.</p>
<p>Не допускаются специальные символы !@#$%^*,./\, выполняется AJAX-проверка.</p>
</div>
</div>
<div class="control-group vld-line">
<label class="control-label"><span class="asterisk">*</span> Пароль</label>
<div class="controls">
<input class="span3" type="password" name="pwd" data-trim="false"
data-vld="[ {required:true}, {length:[6,16]}, {regexp:'ascii'}, {compare:'[name=account]',reverse:true}, {pwdlevel:'medium'} ]" />
<span class="help-inline">
<i class="vld-tips">Пароль должен содержать буквы/цифры/специальные символы.</i>
</span>
</div>
<div class="controls">
<p>Обязательный, 6-16 символов, разрешены пробелы, без китайских символов, не должен совпадать с логином.</p>
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<input type="button" class="btn btn-primary input-medium vld-submit" value="Отправить" />
</div>
</div>
</form>
Правило обязательной проверки:
{ required:true }
Можно настроить сообщение об ошибке, например:
{ required:true, text:'Пожалуйста, примите условия использования' }
{ required:true, text:'Выберите {label}' }
Поле будет считаться недействительным, если оно пустое.
Для одиночных и множественных переключателей, если ни один из них не выбран, проверка не пройдёт.
Правила обязательной проверки должны быть настроены для первого элемента управления в группе переключателей.
Если длина поля не соответствует требованиям, проверка не проходит.
Параметр min указывает минимальную длину, параметр max — максимальную длину. Необходимо задать хотя бы один из этих параметров.
Даже если минимальная длина указана, но поле пустое, проверка пройдёт успешно, и данные могут быть отправлены.
{ length:{min:4,max:12} } // Длина от 4 до 12 символов
{ length:[4,12] } // Длина от 4 до 12 символов
{ length:{min:4} } // Не менее 4 символов
{ length:[4] } // Не менее 4 символов
{ length:{max:12} } // Не более 12 символов
``` **decimal** указывает количество знаков после запятой, по умолчанию равно 0, то есть допускается ввод только целых чисел.
```javascript
{ number:true } // число должно быть числом
{ number:{min:1900,max:2999} } // число должно находиться в диапазоне от 1900 до 2999
{ number:[1900,2999] } // число должно находиться в диапазоне от 1900 до 2999
{ number:{min:1900} } // число не должно быть меньше 1900
{ number:[1900] } // число не должно быть меньше 1900
{ number:{max:2999} } // число не должно превышать 2999
{ number:true, sign:true } // допускается использование знака + или -
{ number:true, decimal:4 } // не более 4 знаков после запятой
{ number:true, sign:true, decimal:4 } // допускается использование знаков + или -, не более 4 знаков после запятой
Предопределённые регулярные выражения
{ regexp:'xxx' }
xxx указывает на предопределённое регулярное выражение, url, email, mobile (номер мобильного телефона), ascii (поддерживает только английские символы), illegal-char (не поддерживает нелегальные символы).
Предопределённые регулярные выражения можно расширять самостоятельно.
(function(zv) {
// определение регулярного выражения, допускающего ввод только цифр и букв
zv.regexp["number-ascii"] = /^[0-9a-zA-Z]*$/;
zv.locals["zh-CN"]["regexp-number-ascii"] = "{label} допускает только цифры и буквы";
// определение регулярного выражения, не допускающего специальные символы
// reverse=true означает инвертирование результата проверки, если проверка проходит успешно, выводится ошибка
zv.regexp["illegal-char"] = { value:/[!@#$%^\*,.\-<>]/, reverse:true };
zv.locals["zh-CN"]["regexp-illegal-char"] = "{label} не поддерживает !@#$%^*,.-<> и другие специальные символы";
})(jQuery.fn.zhhvalidate.defaults);
reverse:true означает инвертирование результата проверки: если проверка успешна, выводится сообщение об ошибке.
В примере с illegal-char это означает, что при появлении указанных специальных символов будет выводиться сообщение об ошибке.
Указание регулярного выражения
{ regexp:/^[0-9a-zA-Z]*$/, text:'{label} допускает только цифры и буквы' }
При указании регулярного выражения нельзя пропускать текст сообщения об ошибке!
Регулярное выражение используется для проверки того, соответствует ли поле регулярному выражению. Если соответствие найдено, проверка пройдена, иначе выводится сообщение об ошибке.
data-ignore-case="true" означает игнорирование регистра, по умолчанию регистр учитывается.
data-reverse="true" означает инвертирование результата проверки: если проверка прошла успешно, выводится сообщение об ошибке.
{ compare:'selector' }
{ compare:'selector', reverse:true }
Проверка на равенство означает, что поле должно совпадать с другим полем, совпадение означает успешную проверку, несовпадение — вывод сообщения об ошибке.
selector — с помощью селектора jQuery выбирается элемент из формы для сравнения.
Например, пароль должен совпадать с паролем подтверждения. { compare:'input[name=pwd]' } указывает на поле ввода пароля.
reverse:true означает инвертирование результата проверки: если поля совпадают, выводится сообщение об ошибке.
Пример: пароль не может совпадать с именем пользователя:
{ compare:'input[name=account]', reverse:true }
{ ajax:'url.do' }
{ ajax:'url.do', fields:fields }
{ ajax:'url.do', fields:fields, options:{ type:GET|POST, dataType:json|html|text, ...} }
Если сервер возвращает строку, true или 1 означают успешное прохождение проверки, false или 0 — неудачное, остальные строки — сообщение об ошибке.
Если сервер возвращает данные в формате JSON, необходимо определить функцию AJAX-парсера:
(function(zv) {
// пользовательская функция AJAX-парсинга
var parse = zv.ajax.parse;
zv.ajax.parse = function(e, json) {
if ($.isPlainObject(json)) {
return { passed:json.code=="000000", text:json.message };
} else { // вызов исходной функции парсинга
return parse.call(this, e, json);
}
};
})(jQuery.fn.zhhvalidate.defaults);
<form data-vld="init:true,oninput:true,focus:true,failFast:false,tips:true,disabled:false">
<div class="vld-line" data-vld="group:true,failFast:false,tips:true,disabled:false"></div>
<input data-vld="tips:true,disabled:false"></input>
init:true|false определяет необходимость инициализации событий привязки, по умолчанию — true. Если инициализация не производится, проверка выполняется только при отправке формы; если инициализация произведена, проверка каждого поля ввода происходит при изменении содержимого поля, потере фокуса или выборе элемента в выпадающем списке. Кроме того, при нажатии на кнопку class="vld-submit" в форме будет выполнена проверка всей формы, и если все поля пройдут проверку, форма будет отправлена автоматически.
oninput:true|false определяет, нужно ли привязывать события oninput к полям <input> и <textarea> (IE: onpropertychange), по умолчанию — true. При отсутствии инициализации проверка выполняется только при отправке формы; при привязке событий проверка каждого поля ввода выполняется при каждом вводе символа. Действует только при init=true.
focus:true|false определяет перемещение фокуса на первое ошибочное поле при неудачной проверке, по умолчанию — true.
failFast:true|false — быстрая проверка на ошибку, по умолчанию — false. При значении true проверка останавливается при первой ошибке, при значении false проверка продолжается даже при наличии ошибок.
tips:true|false|fix определяет отображение сообщений об ошибках, по умолчанию — true. true=отображение сообщений об ошибках, поиск поля vld-tips с текстом; false=автоматическое отображение сообщений об ошибках обычно используется при вызове функции JavaScript для обработки сообщений об ошибках; fix=абсолютное позиционирование, автоматическое создание сообщений об ошибках и их отображение справа от поля ввода.
disabled:true|false определяет отключение проверки, по умолчанию — false. Отключённые поля всегда проходят проверку. Если верхний уровень уже отключён, этот параметр не действует. Например, если в форме задано disabled:true, а в поле ввода — disabled:false, поле ввода останется включённым; если в форме указано disabled:false, а в поле ввода — disabled:true, поле ввода будет отключено.
group:true — групповая проверка, настройка в форме или vld-line объединяет все поля в группу, сообщение об ошибке отображается только один раз. Можно использовать вместе с failFast: если failFast!=true, сообщения об ошибках объединяются.
group:true — групповая проверка, настройка в форме или vld-line объединяет все поля в группе, сообщение об ошибке отображается только один раз. Можно использовать совместно с failFast: если failFast!=true, сообщения об ошибках объединяются.
Пример 1
<div class="vld-line" data-vld="group:true"></div>
Пример 2
<form data-vld="group:true,failFast:true"></form>
Проверка формы: методы включения и отключения проверки
$form.zhhvalidate("clear"); // очищает указанную проверку
Описание методов:
$form.zhhvalidate("disable"); // отключает проверку всей формы. Если форма отключена, то все проверки в ней также отключены.
$form.find("input[name=account]").zhhvalidate("disable"); // Отключает указанную проверку.
$form.zhhvalidate("enable"); // включает проверку всей формы.
$form.zhhvalidate("enable", true); // Включает проверку всей формы и всех проверок в ней.
$form.find("input[name=account]").zhhvalidate("enable"); // Включает указанную проверку.
Если форма отключена, все проверки в этой форме также будут отключены. В этом случае будут проверяться только поля «account» и «validCode», а поле «newPassword» проверяться не будет.
Другие настройки:
Можно настроить различные параметры проверки с помощью метода $.fn.zhhvalidate.defaults. Например, можно настроить функцию AJAX-анализа, стили оформления, селекторы элементов и события привязки. Также можно задать собственные обработчики событий для отправки формы или ручного запуска проверки.
В запросе есть код на языке JavaScript, который представляет собой примеры использования библиотеки zhhvalidate для проверки форм. Этот код переведён на русский язык. Содержание JSON см. в обратном вызове параметров vldinput
if (e.passed) {
$form.submit();
} else {
alert(e.text); // Обработать ошибку самостоятельно
}
});
<br>
## Пользовательские правила проверки
---
Вот пример пользовательского правила, которое не позволяет вводить значение меньше текущего года:
```javascript
+function(zv) {
// Пользовательское правило, которое не допускает значения меньше текущего года
zv.rules.put("year-less-current", function(e) {
if (parseInt(e.value || 0) < new Date().getFullYear()) {
return false; // Проверка не пройдена
}
return true; // Проверка пройдена
});
zv.locals["zh-CN"]["year-less-current"] = "{label} не может быть меньше текущего года";
}(jQuery.fn.zhhvalidate.defaults);
<input data-vld="[ {number:{max:9999}}, {'year-less-current':true} ]" />
А вот ещё один пример более сложного пользовательского правила:
// Если проверка не пройдена, то результат может иметь следующие 5 вариантов, которые используются для получения сообщения об ошибке и замены заполнителей:
// 1. result = false -- Сообщение об ошибке берётся из locals по имени правила
// 2. result = "key" -- Сообщение об ошибке берётся из locals с использованием ключа -key
// 3. result = { "{text}":text } -- Текст является сообщением об ошибке
// 4. result = { "key":value } -- Сообщение об ошибке берётся из locals с использованием ключа -key, а также происходит замена заполнителя {key}
// 5. result = { "{key}":key, x:xvalue, y:yvalue } -- Сообщение об ошибке берётся из locals с использованием ключа -key, и происходит замена заполнителей {x} и {y}
+function(zv) {
// Сообщение об ошибке для правил формата года
zv.locals["zh-CN"]["year-format"] = "{label} формат неправильный";
zv.locals["zh-CN"]["year-format-less-current"] = "{label} не должен быть больше текущего года";
zv.locals["zh-CN"]["year-format-max"] = "{label} не должен превышать {max}";
zv.locals["zh-CN"]["year-format-range"] = "{label} должен находиться в диапазоне от {min} до {max}";
// Пример использования псевдокода для правил формата года
// { 'year-format':true }
// { 'year-format':true, max:9999 }
// { 'year-format':true, min:2050, max:9999 }
zv.rules.put("year-format", function(e) {
var value = parseInt(e.value);
if ('формат неправильный') {
return false; // Первый вариант, имя правила - "year-format" и сообщение об ошибке - "{label} формат неправильный"
} else if (value < 'текущий год') {
return "less-current"; // Второй вариант, ключ правила -year-format-less-current и сообщение об ошибке - {label} не должен быть меньше текущего года"
} else if ('определённое условие') {
return { "{text}":"определённое сообщение об ошибке" }; // Третий вариант, прямое возвращение сообщения об ошибке
} else if (e.rule.max != null && value > e.rule.max) {
// { 'year-format':true, max:9999 }
// Четвёртый вариант, "year-format-max" = "{label} не должно превышать {max}"
return { "max":e.rule.max };
} else if (e.rule.min != null && e.rule.max != null && (value < e.rule.min || value > e.rule.max)) {
// { 'year-format':true, min:2050, max:9999 }
// Пятый вариант, "year-format-range" = "{label} должен находиться в диапазоне от {min} до {max}"
return { "{key}":"range", "min":e.rule.min, "max":e.ruel.max };
}
return true; // Проверка прошла успешно
});
}(jQuery.fn.zhhvalidate.defaults);
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )