Часто приходится «насыщать» интерфейсы с помощью JavaScript. В основном работаю через jQuery, всё нравится, но одна беда – валидация. Постоянно приходится изобретать «велосипед», искать в сети обрывки кода; а ведь хочется написать пару строчек без углубления в детали. Радость не заставила себя ждать: нашёл библиотеку Valid8 (произносится как validate), и, наконец, решил проблему написания кода валидации.
Пользоваться библиотекой оказалось очень просто, чего не скажешь о склеивании jQuery «обрезков» из интернета. Чтобы подключить библиотеку, нужно зайти сюда и нажать заветный Download. Скачается архив, в котором особый интерес представляет файл jquery.valid8.js, его копируем в папку с js файлам нашего проекта и подключаем библиотеку в html:
Допустим у нас есть форма:
Добавляем валидацию (по умолчанию только проверка обязательности заполения), передавая в качестве параметра строку с сообщением об ошибке. Работаем в стиле jQuery:
После того как поле получит фокус и вы из него выйдете не заполнив, объемлющий тег (в нашем случае li) получит класс стиля error.
Для визуализации ошибок добавим CSS в head нашего документа:
Валидация готова. Все.
Функционал Valid8 не ограничивается проверкой заполнения. Для серьёзной работы можно подключить регулярные выражения:
Теперь в поле можно вводить только символы, соответствующие обоим регулярным выражениям. Первое запрещает оставлять поле пустым, а второе добавляет ограничение на ввод 4-мя символами: можно ввести habr, babr, habrahabr, или что-то производное, соответствующее выражению.
Можно для валидации использовать сервер:
Теперь библиотека будет общаться с сервером для проверки вводимого значения (например, предупреждать о зарегистрированном логине). На сервер значение в поле передаётся через POST в параметре value. Сервер должен вернуть ответ в формате JSON:
Можно совмещать валидацию по регулярным выражениям и серверу. Есть другие возможности: определение события, по которому происходит валидация, интервал проверки, js функции валидации.
Библиотека Valid8
Библиотека jQuery
Как пользоваться
Пользоваться библиотекой оказалось очень просто, чего не скажешь о склеивании jQuery «обрезков» из интернета. Чтобы подключить библиотеку, нужно зайти сюда и нажать заветный Download. Скачается архив, в котором особый интерес представляет файл jquery.valid8.js, его копируем в папку с js файлам нашего проекта и подключаем библиотеку в html:
<script src="/js/jquery-1.6.3.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.valid8.js" type="text/javascript" charset="utf-8"></script>
Допустим у нас есть форма:
<form><ul>
<li><input type="text" id="inputSome" /></li>
</ul></form>
Добавляем валидацию (по умолчанию только проверка обязательности заполения), передавая в качестве параметра строку с сообщением об ошибке. Работаем в стиле jQuery:
$('#inputSome').valid8("Заполни это поле!");
После того как поле получит фокус и вы из него выйдете не заполнив, объемлющий тег (в нашем случае li) получит класс стиля error.
Для визуализации ошибок добавим CSS в head нашего документа:
<style>
.error input { background:pink; }
</style>
Валидация готова. Все.
Возможности поинтереснее
Функционал Valid8 не ограничивается проверкой заполнения. Для серьёзной работы можно подключить регулярные выражения:
$('#inputSome').valid8({
'regularExpressions': [
{ expression: /^.+$/, errormessage: 'Заполни это поле!'},
{ expression: /^[habr]+$/|>, errormessage: 'Вы можете использовать только символы h, a, b, r'}
]
});
Теперь в поле можно вводить только символы, соответствующие обоим регулярным выражениям. Первое запрещает оставлять поле пустым, а второе добавляет ограничение на ввод 4-мя символами: можно ввести habr, babr, habrahabr, или что-то производное, соответствующее выражению.
Ну и Ajax разумеется
Можно для валидации использовать сервер:
$('#inputSome').valid8({
'ajaxRequests': [
{ url: '/ajax/validation/' }
]
});
Теперь библиотека будет общаться с сервером для проверки вводимого значения (например, предупреждать о зарегистрированном логине). На сервер значение в поле передаётся через POST в параметре value. Сервер должен вернуть ответ в формате JSON:
{"valid": true, "message": "Отлично, такого пользователя ещё нет!"}
Можно совмещать валидацию по регулярным выражениям и серверу. Есть другие возможности: определение события, по которому происходит валидация, интервал проверки, js функции валидации.
Источники
Библиотека Valid8
Библиотека jQuery