Проверка формы важна для безопасности и упрощает использование наших веб-приложений. Разработчики постоянно создают формы, и мы снова и снова повторяем одни и те же шаблоны в каждом проекте.
Нам также нравится быть эффективными (упрощать себе жизнь), а использование некоторых доверенных сторонних библиотек — отличный способ сократить код и упростить его чтение и работу.
Сегодня я собираюсь реализовать очень полезную библиотеку 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.
Спасибо за чтение и будьте здоровы!