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

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

Сегодня я собираюсь реализовать очень полезную библиотеку 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;
view raw Contact.js hosted with ❤ by GitHub

Установите и импортируйте форму 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;
view raw Contact.js hosted with ❤ by GitHub

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

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;
view raw Contact.js hosted with ❤ by GitHub

Присвойте 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;
view raw Contact.js hosted with ❤ by GitHub

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

<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;
view raw Contact.js hosted with ❤ by GitHub

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

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

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

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