Проверка формы с помощью IodineJS

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

HTML-страница

Начнем с HTML. У нас есть простая форма регистрации, в которой мы принимаем имя пользователя и адрес электронной почты. У нас также есть кнопка отправки и скрытые промежутки, которые будут содержать любые сообщения о неудачной проверке.

В сущности, вы увидите множество ссылок на служебные классы CSS. Это часть замечательной библиотеки Tailwind CSS, которую я использую во всех своих приложениях. Они присутствуют, чтобы форма выглядела красиво, но они не обязаны использовать йод.

Код JavaScript

Теперь давайте посмотрим на register функцию JavaScript, которая запускается браузером при нажатии кнопки:

Давайте разберемся, что здесь происходит:

  1. Во-первых, у нас есть флаг верхнего уровня, который указывает, является ли форма valid или нет. По умолчанию мы предполагаем, что это не так.
  2. Затем у нас есть простой объект, содержащий каждое из имен полей и правила проверки, которые мы хотим применить для них. Вы можете узнать больше об этом и об используемых правилах, изучив readme репо.
  3. В функции register мы отключаем собственное поведение браузера при нажатии кнопки в форме (то есть для немедленной отправки).
  4. Затем мы устанавливаем флаг valid в значение true, чтобы форму можно было отправить.
  5. Мы перебираем каждое поле в объекте правил, находим соответствующий ввод на странице и получаем его значение.
  6. Затем скрывается ошибка проверки ввода. Таким образом, нам не нужно ничего делать с ним, если проверка пройдет успешно.
  7. Затем у нас есть йод для проверки поля. Если это не удается, мы устанавливаем флаг valid на false, получаем сообщение об ошибке и отображаем его.
  8. Наконец, как только все поля будут проверены, мы проверяем флаг valid. Если он по-прежнему true, мы отправляем форму.

Подведение итогов

Я надеюсь, что этот простой пример показал вам, насколько легко интегрировать Iodine в ваши приложения / страницы. Действительно, в самом примере Iodine составляет всего около 5 строк кода!

Я рекомендую вам ознакомиться с readme для получения более подробной информации и примеров.

Если вы хотите быть в курсе новостей о Йоде и других проектах, то, пожалуйста, подписывайтесь на меня в Твиттере. Спасибо за чтение и удачного дня!