Валидация в JavaScript с помощью Valid8

Часто приходится «насыщать» интерфейсы с помощью JavaScript. В основном работаю через jQuery, всё нравится, но одна беда – валидация. Постоянно приходится изобретать «велосипед», искать в сети обрывки кода; а ведь хочется написать пару строчек без углубления в детали. Радость не заставила себя ждать: нашёл библиотеку Valid8 (произносится как validate), и, наконец, решил проблему написания кода валидации.

Как пользоваться


Пользоваться библиотекой оказалось очень просто, чего не скажешь о склеивании 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
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 14

    –3
    Спасибо за статью!
      +16
      В чем отличия\преимущества по сравнению с JQuery Validation?
        0
        Valid8 проще использовать с regex, а так дело личных предпочтений.
        +1
        Для тех, кого так же волнует вопрос о размере файла, как волновал меня, — я уже скачал, узнал и сообщаю :)
        3,85 КБ (3 951 байт)
          +2
          А мне нравится jQuery.validationEngine очень симпатичный и легко прикручивается
          www.position-relative.net/creation/formValidator/
            –6
            Прошу прощения, а чем не устраивает чистый JS для валидации?
              +1
              Объёмом схожего кода, который надо писать вручную опять и опять?
              0
              А может кто посоветует библиотеку чтобы сразу были готовые регулярки для проверок мыла, логина, пароля и т. д.
              0
              > После того как поле получит фокус и вы из него выйдете не заполнив

              Грубая ошибка с точки зрения юзабилити. Пользователю надо всегда давать право выбора.
                0
                Готов поспорить, если поле помечено как «required». А даже если не помечено, то background: pink, думаю, не сильно расстроит пользователя :)
                  0
                  да, согласен, немного не разобрался
                0
                Зачем же при AJAX валидации при TRUE возвращать msg?

                Да, сноб :)
                  0

                  Only users with full accounts can post comments. Log in, please.