Статьи

10 плагинов для проверки форм jQuery

Эта популярная статья была обновлена ​​8 августа 2016 года и отражает текущее состояние плагинов для проверки форм. Комментарии, относящиеся к старой статье, были удалены.

HTML5 ввел новые атрибуты формы, чтобы браузер мог проверять формы изначально. С помощью CSS3 и JavaScript вы можете реализовать базовую проверку формы без использования плагина — как описано в этой статье . Но это имеет несколько ограничений:

  • Сообщения об ошибках оставляются в самом браузере, вы можете указать только заголовки полей ввода
  • Вы не можете настроить стиль сообщений об ошибках
  • Вам придется самостоятельно создавать шаблоны для полей ввода

Следующие 10 плагинов для проверки форм jQuery ставят перед собой цель настроить сообщения об ошибках и стили, а также упростить создание правил проверки.

1. Петрушка

Расширяемый плагин, который предлагает обычные опции, такие как локализация и пользовательские правила проверки, а также удаленную проверку Ajax. Документация чиста и легка для чтения, а проект активно поддерживается. Правилами проверки можно управлять с помощью формы HTML5 или пользовательских атрибутов данных.

Интернет сайт
Исходный код

2. JQuery Form Validator

Модульный плагин, который предлагает базовый набор правил проверки по умолчанию и позволяет загружать дополнительные модули по требованию. Например: валидатор файлов при загрузке файлов, а также модули даты, безопасности или местоположения. Это также позволяет вам вводить предложения. Проверка контролируется с помощью атрибутов данных HTML5.

Интернет сайт
Исходный код

3. Плагин проверки jQuery

Один из первых плагинов проверки 2006 года. Он позволяет вам задавать пользовательские правила проверки с использованием атрибутов HTML5 или объектов JavaScript. В нем также реализовано множество правил по умолчанию и предлагается API для простого создания правил. Сначала найти подробную информацию о плагине может быть сложно, и он ограничен jQuery 1.x, но они обещали сделать его лучше — посмотрите эту кампанию .

Интернет сайт
Исходный код

4. Начальная загрузка валидатора

Плагин проверки JQuery для Bootstrap. По сути, это просто оболочка для проверки собственной формы с использованием атрибутов HTML5, но она также может использоваться для добавления пользовательских правил. Он всегда показывает сообщения об ошибках из браузера, автоматически переведенные на правильный язык.

Интернет сайт
Исходный код

5. Дым

Smoke — это набор компонентов для Bootstrap, включая валидатор форм. По сравнению с другим валидатором Bootstrap (# 4), он не использует собственную проверку браузера — поэтому сообщения об ошибках не локализуются автоматически, и правила проверки должны указываться с использованием HTML5 и атрибутов данных, а также JavaScript.

Интернет сайт
Исходный код

6. Форма проверки

Премиальный плагин для проверки jQuery от 50 $ со встроенными интеграциями для Bootstrap, Foundation и других. Он имеет огромное количество правил проверки, а также опций и может быть выгодным для приложений со многими сложными формами.

FormValidation

Интернет сайт

7. Валидатр

Очень простая оболочка для проверки формы браузером, которая использует везде, где это возможно, собственные сообщения об ошибках, управляемые атрибутами формы HTML5. Его можно использовать как полифилл или для настройки стиля сообщения об ошибке. Ни больше ни меньше.

Интернет сайт
Исходный код

8. Валидетта

Этот плагин предлагает проверку с использованием атрибута данных с довольно ограниченными возможностями. Он поставляется только с основными правилами проверки, все остальное можно добавить с помощью пользовательских регулярных выражений, но нет примера, демонстрирующего это. По сравнению с другими плагинами, единственная уникальная особенность заключается в том, что сообщения об ошибках отображаются в виде пузырьков (см. Демонстрацию ниже).

Интернет сайт
Исходный код

9. jQuery.validity

Плагин для управления проверкой только с помощью JavaScript — без HTML5 или атрибутов данных. Хотя это может быть полезно для правил динамической проверки, плагин не предлагает достаточно вариантов, чтобы сделать запись эффективной. Он даже не позволяет использовать новые атрибуты типа HTML5, такие как email

Интернет сайт
Исходный код

10. h5Validate

Этот плагин, к сожалению, был оставлен его создателем (Эриком Эллиоттом). Следовательно, веб-сайт демонстрации / документации возвращает 404, и есть два десятка открытых вопросов. Плагин не проверяет автоматически входные данные по типу, а в следующем примере даже не отображаются сообщения об ошибках. Мы включили его в список, так как Эрик ищет нового сопровождающего для проекта, поэтому есть вероятность, что в какой-то момент в будущем он может вдохнуть в него жизнь.

Исходный код

Вывод

Ну, это десятка лучших плагинов для проверки форм jQuery. Если у вас есть опыт работы с этими (хорошими или плохими!) Или вы знаете о других плагинах проверки формы, о которых стоит упомянуть, сообщите нам об этом в комментариях!