Как добавить проверку формы в формы React с помощью React Hook Form

1655993768 kak dobavit proverku formy v formy react s pomoshhyu react

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

Мы узнаем, как добавить проверку в форму с помощью React и React Hook Form.

Как создать форму в React

Мы начнем с создания формы с помощью библиотеки Semantic UI. Итак, давайте установим его с помощью одной из следующих команд:

yarn add semantic-ui-react semantic-ui-css
## Or NPM
npm install semantic-ui-react semantic-ui-css

После того, как вы его установите, вам нужно импортировать пакет в файл index.js, который является основным файлом записи вашего приложения.

import 'semantic-ui-css/semantic.min.css'

Тогда нам понадобится форма с четырьмя полями. Итак, давайте создадим его с помощью следующего кода:

import React from 'react';
import { Form, Button } from 'semantic-ui-react';

export default function FormValidation() {
    return (
        <div>
            <Form>
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder="First Name" type="text" />
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder="Last Name" type="text" />
                </Form.Field>
                <Form.Field>
                    <label>Email</label>
                    <input placeholder="Email" type="email" />
                </Form.Field>
                <Form.Field>
                    <label>Password</label>
                    <input placeholder="Password" type="password" />
                </Form.Field>
                <Button type="submit">Submit</Button>
            </Form>
        </div>
    )
}

Сейчас у нас есть форма. Он имеет четыре поля: имя, фамилию, электронный адрес и пароль. Он также имеет кнопку «Отправить», чтобы пользователи могли отправить форму.

Скриншот-2021-10-09-103510

Как установить React Hook Form

Чтобы установить React Hook Form, воспользуйтесь командой ниже:

npm install react-hook-form

Вы можете прочитать документацию, если хотите узнать больше о библиотеке. Мы можем использовать его как для веб-приложений React, так и React Native.

Первое, что нам нужно сделать это получить данные с полей ввода и отобразить их в консоли. Сначала нам нужно импортировать пакет:

import { useForm } from "react-hook-form";

Затем нам нужно деструктурировать useForm объект в нашем приложении, например:

const { register, handleSubmit, formState: { errors } } = useForm();

Теперь мы собираемся использовать register имущества от объекта useForm чтобы зарегистрировать поля формы. Это будет примерно так:

<Form.Field>
                    <label>First Name</label>
                    <input
                        placeholder="First Name"
                        type="text"
                        {...register("firstName")}
                    />
                </Form.Field>

Теперь поле формы Имя имеет ключ firstName. Как видим, мы объявили это в зарегистрировать. Повторите это для всех остальных полей.

import React from 'react';
import { Form, Button } from 'semantic-ui-react';
import { useForm } from "react-hook-form";

export default function FormValidation() {
    const { register, handleSubmit, formState: { errors } } = useForm();
    return (
        <div>
            <Form>
                <Form.Field>
                    <label>First Name</label>
                    <input
                        placeholder="First Name"
                        type="text"
                        {...register("firstName")}
                    />
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input
                        placeholder="Last Name"
                        type="text"
                        {...register("lastName")}
                    />
                </Form.Field>
                <Form.Field>
                    <label>Email</label>
                    <input
                        placeholder="Email"
                        type="email"
                        {...register("email")}
                    />
                </Form.Field>
                <Form.Field>
                    <label>Password</label>
                    <input
                        placeholder="Password"
                        type="password"
                        {...register("password")}
                    />
                </Form.Field>
                <Button type="submit">Submit</Button>
            </Form>
        </div>
    )
}

Это весь код к этому моменту. Четыре поля, и все зарегистрированы.

Теперь на форме нам нужно сделать файл onSubmit событие. Это означает, что если мы нажмем кнопку Отправить внизу, данные формы должны быть отправлены.

<Form onSubmit={handleSubmit(onSubmit)}>

И нам также нужно создать функцию onSubmit, которая будет выполнять определенное действие при нажатии или нажатии кнопки отправки.

const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
  console.log(data);
}

Итак, если мы нажмем кнопку «Отправить», наши вводимые данные появятся на консоли.

Скриншот-2021-10-09-104958

Как добавить проверку в наши формы

Вот и наступил последний и самый ожидаемый шаг. Добавим подтверждение.

Начнём с поля Имя. Мы будем использовать необходимые свойства и свойства maxLength, вполне понятные.

  • требуется означает, что поле обязательно.
  • Максимальная длина обозначает максимальную длину символов.
<input
  placeholder="First Name"
  type="text"
  {...register("firstName", { required: true, maxLength: 10 })}
/>

Итак, настройте required к истине и maxLength до 10. Тогда, если мы отправим форму без ввода имени, или если количество символов превышает 10, это приведет к ошибке.

Но нам также нужно добавить само сообщение об ошибке. Добавьте сообщение об ошибке после поля формы имени.

{errors.firstName && <p>Please check the First Name</p>}

Здесь он выдаст ошибку. Итак, проверим, что произошло.

Скриншот-2021-10-09-105958

Вы можете увидеть ошибку после поля Имя с надписью «Проверьте имя».

Повторите этот процесс для фамилии.

Скриншот-2021-10-09-110249

Ввод более 10 символов также приведет к ошибке.

Теперь нам нужно добавить проверку для полей электронной почты и пароля. Здесь мы будем использовать другое свойство под названием Pattern. Шаблон будет содержать значение регулярного выражения, и оно будет проверяться с данными, введенными в форму.

pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ 

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

<Form.Field>
                    <label>Email</label>
                    <input
                        placeholder="Email"
                        type="email"
                        {...register("email", 
                        { 
                            required: true,  
                            pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ 
                        })}
                    />
                </Form.Field>

В поле формы электронной почты добавьте этот шаблон.

Скриншот-2021-10-09-110849

Ввод неправильного формата электронной почты приведет к ошибке. Но ошибка исчезнет, ​​когда мы введем правильный формат.

Скриншот-2021-10-09-110950

Сделаем то же самое для поля формы пароля. Для поля пароля мы имеем условие, что оно должно содержать одну заглавную букву, одну маленькую букву, а количество символов должно быть от 6 до 15. Если наше введенное значение не пройдет ни одной из этих проверок, это приведет к ошибке.

 <Form.Field>
                    <label>Password</label>
                    <input
                        placeholder="Password"
                        type="password"
                        {...register("password", { 
                            required: true, 
                            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/
                        })}
                    />
                </Form.Field>
                {errors.password && <p>Please check the Password</p>}

Теперь все четыре поля формы заполнены.

import React from 'react';
import { Form, Button } from 'semantic-ui-react';
import { useForm } from "react-hook-form";

export default function FormValidation() {
    const { register, handleSubmit, formState: { errors } } = useForm();
    const onSubmit = (data) => {
        console.log(data);
    }
    return (
        <div>
            <Form onSubmit={handleSubmit(onSubmit)}>
                <Form.Field>
                    <label>First Name</label>
                    <input
                        placeholder="First Name"
                        type="text"
                        {...register("firstName", { required: true, maxLength: 10 })}
                    />
                </Form.Field>
                {errors.firstName && <p>Please check the First Name</p>}
                <Form.Field>
                    <label>Last Name</label>
                    <input
                        placeholder="Last Name"
                        type="text"
                        {...register("lastName", { required: true, maxLength: 10 })}
                    />
                </Form.Field>
                {errors.lastName && <p>Please check the Last Name</p>}
                <Form.Field>
                    <label>Email</label>
                    <input
                        placeholder="Email"
                        type="email"
                        {...register("email",
                            {
                                required: true,
                                pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                            })}
                    />
                </Form.Field>
                {errors.email && <p>Please check the Email</p>}
                <Form.Field>
                    <label>Password</label>
                    <input
                        placeholder="Password"
                        type="password"
                        {...register("password", {
                            required: true,
                            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/
                        })}
                    />
                </Form.Field>
                {errors.password && <p>Please check the Password</p>}
                <Button type="submit">Submit</Button>
            </Form>
        </div>
    )
}

Вот весь код для справки. Мы также можем добавить некоторые стили в наши сообщения об ошибках – например, например:

Скриншот-2021-10-09-111533

Вывод

Теперь вы знаете, как добавить проверку в React Forms. Обратите внимание, что React Hook Form работает только в функциональных компонентах, а не в компонентах класса.

Вы можете просмотреть мое видео о «Добавим проверку в формах с помощью React и React Hook Form», которое есть на моем канале YouTube.

А вот весь код на GitHub для справки.

Счастливого обучения.

Добавить комментарий

Ваш адрес email не будет опубликован.