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

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

Сегодня я собираюсь реализовать очень полезную библиотеку React Hook Forms. В этой библиотеке используется настраиваемый хук React, который упрощает добавление проверок.

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

Что мы строим сегодня?

Мы собираемся создать форму, которая принимает name, email и message пользователя. Для этой демонстрации мы добавим следующие проверки:

  • name существует и имеет длину менее 20 символов.
  • email существует и является допустимым форматом электронной почты.
  • message существует.

Вот как будет выглядеть наша форма, когда мы закончим:

Создать компонент

Я назову свой компонент Contact.

Установите и импортируйте форму React Hook.

  • В вашем терминале: npm install react-hook-form.
  • Импортируйте useForm в свой компонент.

Создайте базовую форму

Присвойте useForm() переменным, используя деконструкцию.

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

Каждому <input> требуется уникальное имя.

register является ключом к useForm. Это позволяет значению быть доступным как для проверки, так и для отправки.

Теперь у нас есть форма! Добавим несколько проверок.

Добавить проверки

useForm поддерживает следующие проверки:

  • обязательный
  • мин
  • Максимум
  • минДлина
  • шаблон
  • подтверждать

Валидации добавляются к eachregister. Ознакомьтесь с правилами проверки здесь.

Вот однострочная версия ввода (на случай, если вам будет легче читать).

<input name="name" ref={register({required: true, maxLength: 20})}/>

Показать ошибки

Чтобы показать, что эти проверки работают, давайте вернемся и отобразим ошибки.

Здесь мы собираемся использовать errors, который мы получаем от useForm. Мы собираемся добавить немного Javascript под каждый файл <input>.

  • Если у вас есть одна проверка на <input>, отформатируйте error, передав следующую строку:
{errors.name && "Please enter a name"}
  • Если у вас есть более одной проверки, добавьте ее следующим образом:
{errors.name && errors.name.message}

и обновите значение каждой проверки, чтобы оно включало два ключа: value и message, как в примере ниже.

Это просто! Вот результаты:

На следующей неделе мы отправим это сообщение из вашего приложения React на вашу электронную почту с помощью EmailJS. Быть в курсе!

Ознакомьтесь с некоторыми другими моими историями; Сброс CSS или Recoil.js и простое глобальное состояние. Свяжитесь со мной по адресу [email protected] или через joshgotro.com.

Спасибо за чтение и будьте здоровы!