Проверка формы важна для безопасности и упрощает использование наших веб-приложений. Разработчики постоянно создают формы, и мы снова и снова повторяем одни и те же шаблоны в каждом проекте.
Нам также нравится быть эффективными (упрощать себе жизнь), а использование некоторых доверенных сторонних библиотек — отличный способ сократить код и упростить его чтение и работу.
Сегодня я собираюсь реализовать очень полезную библиотеку React Hook Forms. В этой библиотеке используется настраиваемый хук React, который упрощает добавление проверок.
В этой демонстрации предполагается, что у вас уже есть проект React. Для получения дополнительной информации о том, как создать приложение React, ознакомьтесь с их документами или одним из моих предыдущих блогов, каждая из которых начинается с пошаговых инструкций.
Что мы строим сегодня?
Мы собираемся создать форму, которая принимает name
, email
и message
пользователя. Для этой демонстрации мы добавим следующие проверки:
name
существует и имеет длину менее 20 символов.email
существует и является допустимым форматом электронной почты.message
существует.
Вот как будет выглядеть наша форма, когда мы закончим:
Создать компонент
Я назову свой компонент Contact
.
import React from 'react'; | |
const Contact = () => { | |
return ( | |
<div> | |
Contact Me | |
</div> | |
); | |
} | |
export default Contact; |
Установите и импортируйте форму React Hook.
- В вашем терминале:
npm install react-hook-form
. - Импортируйте
useForm
в свой компонент.
import React from 'react'; | |
import { useForm } from "react-hook-form"; | |
const Contact = () => { | |
return ( | |
<div> | |
Contact Me | |
</div> | |
); | |
} | |
export default Contact; |
Создайте базовую форму
import React from 'react'; | |
import './CSS/Contact.css'; | |
import { useForm } from "react-hook-form"; | |
const Contact = () => { | |
const { register, handleSubmit, errors } = useForm(); | |
const onSubmit = values => console.log(values); | |
return ( | |
<div className="ContactForm"> | |
<form onSubmit={handleSubmit(onSubmit)}> | |
<input name="name" ref={register} /><br/> | |
<input name="=email" ref={register} /><br/> | |
<textarea name="comment" ref={register} /><br/> | |
<input type="submit" /> | |
</form> | |
</div> | |
); | |
} | |
export default Contact; |
Присвойте useForm()
переменным, используя деконструкцию.
Назначить onSubmit
. На данный момент это заполнитель, мы обновим его в следующем блоге, чтобы сообщение было отправлено по электронной почте.
Каждому <input>
требуется уникальное имя.
register
является ключом к useForm. Это позволяет значению быть доступным как для проверки, так и для отправки.
Теперь у нас есть форма! Добавим несколько проверок.
Добавить проверки
useForm поддерживает следующие проверки:
- обязательный
- мин
- Максимум
- минДлина
- шаблон
- подтверждать
Валидации добавляются к eachregister
. Ознакомьтесь с правилами проверки здесь.
import React from 'react'; | |
import './CSS/Contact.css'; | |
import { useForm } from "react-hook-form"; | |
const Contact = () => { | |
const { register, handleSubmit, errors } = useForm(); | |
const onSubmit = values => console.log(values); | |
return ( | |
<div className="ContactForm"> | |
<form onSubmit={handleSubmit(onSubmit)}> | |
<input | |
name="name" | |
ref={ | |
register({ | |
required: true, | |
maxLength: 20 | |
}) | |
} | |
/><br/> | |
<input | |
name="email" | |
ref={ | |
register({ | |
required: true, | |
pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i | |
}) | |
} | |
/><br /> | |
<textarea | |
name="comment" | |
ref={ | |
register({ | |
required: true | |
}) | |
} | |
/><br /> | |
<input type="submit" /> | |
</form> | |
</div> | |
); | |
} | |
export default Contact; |
Вот однострочная версия ввода (на случай, если вам будет легче читать).
<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
, как в примере ниже.
import './CSS/Contact.css'; | |
import { useForm } from "react-hook-form"; | |
const Contact = () => { | |
const { register, handleSubmit, errors } = useForm(); | |
const onSubmit = values => console.log(values); | |
return ( | |
<div className="ContactForm"> | |
<form onSubmit={handleSubmit(onSubmit)}> | |
<input | |
name="name" | |
ref={ | |
register({ | |
required: "Please enter your name", | |
maxLength: { | |
value: 20, | |
message: "Please enter a name with fewer than 20 characters" | |
} | |
}) | |
} | |
/><br /> | |
{errors.name && errors.name.message}<br /> | |
<input | |
name="email" | |
ref={ | |
register({ | |
required: "Please enter an email", | |
pattern: { | |
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, | |
message: "invalid email address" | |
} | |
}) | |
} | |
/><br/> | |
{errors.email && errors.email.message}<br /> | |
<textarea | |
name="comment" | |
ref={ | |
register({ | |
required: true | |
}) | |
} | |
/><br /> | |
{errors.comment && "oops, you forgot your message!"}<br /> | |
<input type="submit" /> | |
</form> | |
</div> | |
); | |
} | |
export default Contact; |
Это просто! Вот результаты:
На следующей неделе мы отправим это сообщение из вашего приложения React на вашу электронную почту с помощью EmailJS. Быть в курсе!
Ознакомьтесь с некоторыми другими моими историями; Сброс CSS или Recoil.js и простое глобальное состояние. Свяжитесь со мной по адресу joshuagautreaux@gmail.com или через joshgotro.com.
Спасибо за чтение и будьте здоровы!