Как реализовать валидацию input-полей при использовании React Hook Form?

Основы валидации в React Hook Form

React Hook Form — это библиотека для управления формами в React, которая минимизирует количество ререндеров и упрощает валидацию. Валидация настраивается прямо в методе register, который связывает поле с состоянием формы. Вы передаёте объект с правилами, и библиотека автоматически проверяет значения при отправке или изменении.

Встроенные правила покрывают большинство базовых случаев: required (обязательное поле), minLength/maxLength (длина), pattern (регулярное выражение), min/max (числовые границы). Для более сложной логики используется функция validate, которая возвращает true или строку с ошибкой.

Пример базовой валидации

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

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

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', {
        required: 'Email обязателен',
        pattern: {
          value: /^[^@\s]+@[^@\s]+\.[^@\s]+$/,
          message: 'Некорректный email'
        }
      })} />
      {errors.email && <p>{errors.email.message}</p>}

      <input {...register('age', {
        min: { value: 18, message: 'Возраст должен быть ≥ 18' }
      })} />
      {errors.age && <p>{errors.age.message}</p>}

      <button type="submit">Отправить</button>
    </form>
  );
}

Кастомная валидация через validate

Если нужно проверить, например, что пароль содержит цифру, используйте функцию validate. Она получает текущее значение поля и должна вернуть true или строку с ошибкой.

register('password', {
  validate: (value) =>
    /\d/.test(value) || 'Пароль должен содержать цифру'
})

Интеграция с Yup или Zod

Для сложных схем валидации удобно использовать resolver. Установите @hookform/resolvers и выберите схему Yup или Zod. Это позволяет вынести правила в отдельный файл и переиспользовать их.

import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().email().required(),
  age: yup.number().min(18).required()
});

useForm({ resolver: yupResolver(schema) });

Вывод

React Hook Form предоставляет гибкие и производительные инструменты для валидации. Для простых форм достаточно встроенных правил, для сложных — используйте resolver с Yup или Zod. Это делает код чистым и легко поддерживаемым, особенно в крупных проектах.