Реализация валидации с помощью jQuery Validation Plugin
Плагин jQuery Validation Plugin умеет проверять форму на корректность заполненных данных в соответствии с заданными правилами и динамически отображает ошибки пользователя.
Особенностями jQuery Validation Plugin являются:
- проверка URL и E-mail;
- проверка максимальных и минимальных значений, диапазонов чисел, дат;
- автоматическое отображение ошибок.
Принцип работы с плагином
Рассмотрим работу плагина на примере простой формы ввода логина и пароля.
Пример HTML формы:
<form id="loginform" action="" method="post">
Ваш логин:
<input type="text" name="login" />
Ваш пароль:
<input type="password" name="pswd" />
<input type="submit" name="enter" value="Войти" /></form>
Подключение файлов и библиотек:
Подключаем библиотеки jQuery и плагин на страницу.
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js">
</script>
JS
Далее для HTML-формы с заданным id инициализируется плагин
($("#loginform").validate())
В атрибуте “rules” определяются поля по их имени (name=”login”), и задаются правила для конкретного поля, по которым будет происходить валидация.
В параметре “messages” задаётся текст сообщения ошибки валидации для каждого правила в отдельности.
$(document).ready(function(){
$("#loginform").validate({
rules:{
login:{
required: true,
minlength: 4,
maxlength: 16,
},
pswd:{
required: true,
minlength: 6,
maxlength: 16,
},
},
messages:{
login:{
required: "Это поле обязательно для заполнения",
minlength: "Логин должен быть минимум 4 символа",
maxlength: "Максимальное число символов - 16",
},
pswd:{
required: "Это поле обязательно для заполнения",
minlength: "Пароль должен быть минимум 6 символа",
maxlength: "Пароль должен быть максимум 16 символов",
},
}
});
});
CSS
Чтобы менять внешний вид сообщений об ошибке, нужно в CSS-файле работать с классом .error
.error{
color: red;
}
Список правил
required — поле обязательное для заполнения (true или false);
maxlength — максимальное кол-во символов (число);
minlength — минимальное кол-во символов (число);
email — проверяет корректность e-mail адреса (true или false);
url — проверяет корректность url адреса (true или false);
remote — указывается файл для проверки поля (например: check.php);
date — проверка корректности даты (true или false);
dateISO — проверка корректности даты ISO (true или false);
number — проверка на число (true или false);
digits — только цифры (true или false);
creditcard — корректность номера кредитной карты (true или false);
equalTo — равное чему-то (например, другому полю equalTo:»#pswd»);
accept — проверка на правильное расширение (accept: «xls|csv»);
rangelength — диапазон кол-ва символов, минимальное и максимальное (rangelength: [2, 6]);
range — число должно быть в диапазоне от и до (range: [13, 23]);
max — максимальное значение числа (22);
min — минимальное значение числа (11).
Создание собственного фильтра в Hibernate Search «Общий репозиторий» модель совместной разработки
Крутой плагин