Валидация полей

Ant Design предоставляет мощный механизм для валидации форм через компонент Form и его подкомпоненты, такие как Form.Item. Валидация позволяет проверять корректность вводимых пользователем данных и управлять отображением ошибок на уровне интерфейса.

Структура Form и Form.Item

Компонент Form используется для объединения группы полей, а Form.Item оборачивает конкретное поле ввода. Валидация выполняется через свойства rules и validateTrigger:

import { Form, Input, Button } from 'antd';

<Form
  name="exampleForm"
  initialValues={{ username: '' }}
  onFin ish={(values) => console.log(values)}
>
  <Form.Item
    label="Имя пользователя"
    name="username"
    rules={[
      { required: true, message: 'Пожалуйста, введите имя пользователя' },
      { min: 3, message: 'Имя должно содержать минимум 3 символа' }
    ]}
  >
    <Input />
  </Form.Item>

  <Form.Item>
    <Button type="primary" htmlType="submit">
      Отправить
    </Button>
  </Form.Item>
</Form>
  • rules — массив правил проверки для конкретного поля. Каждое правило может содержать required, min, max, pattern, type и другие параметры.
  • message — текст ошибки, который будет отображен при нарушении правила.
  • validateTrigger — определяет событие, при котором выполняется проверка (onChange, onBlur).

Основные типы правил

  1. Обязательные поля (required) Проверяет, что значение не пустое. Может использоваться для Input, Select, Checkbox и других компонентов.

  2. Проверка длины (min, max, len) Позволяет задать ограничения по количеству символов или элементов (например, длину строки или количество выбранных опций).

  3. Регулярные выражения (pattern) Поддерживает гибкие проверки с использованием RegExp:

    rules={[
  { pattern: /^[A-Za-z0-9]+$/, message: 'Только латинские буквы и цифры' }
]}

  4. Тип данных (type) Например, type: 'email' автоматически проверяет корректность email-адреса, type: 'number' проверяет числовые значения.

  5. Кастомная проверка (validator) Позволяет реализовать сложные проверки через функцию:

    rules={[
  {
    validator: (_, value) => {
      if (!value || value.includes('abc')) {
        return Promise.resolve();
      }
      return Promise.reject('Значение должно содержать "abc"');
    }
  }
]}

Управление моментом проверки

По умолчанию Form.Item валидирует поле при событии onChange. Можно изменить это поведение:

<Form.Item
  name="email"
  rules={[{ type: 'email', message: 'Некорректный email' }]}
  validateTrigger="onBlur"
>
  <Input />
</Form.Item>
  • onChange — проверка при каждом изменении поля.
  • onBlur — проверка при уходе фокуса с поля.
  • Можно указать массив событий: validateTrigger={['onChange', 'onBlur']}.

Валидация нескольких полей и зависимые правила

Иногда необходимо проверять поле в зависимости от значения другого. Это реализуется через функцию validator с доступом к остальным полям формы:

<Form.Item
  name="confirmPassword"
  dependencies={['password']}
  rules={[
    { required: true, message: 'Подтвердите пароль' },
    ({ getFieldValue }) => ({
      validator(_, value) {
        if (!value || getFieldValue('password') === value) {
          return Promise.resolve();
        }
        return Promise.reject('Пароли не совпадают');
      },
    }),
  ]}
>
  <Input.Password />
</Form.Item>
  • dependencies — массив полей, от которых зависит валидация текущего.
  • getFieldValue — метод для получения значения другого поля формы.

Отображение ошибок

Ошибки автоматически отображаются под полем через Form.Item с использованием свойства help и состояния validateStatus:

  • validateStatus="error" — отображает поле как ошибочное.
  • help="Сообщение об ошибке" — позволяет кастомизировать текст ошибки.

Можно управлять отображением вручную:

<Form.Item
  validateStatus="error"
  help="Неправильный формат"
>
  <Input />
</Form.Item>

Асинхронная валидация

Функция validator может возвращать Promise для асинхронных проверок, например, проверки уникальности имени пользователя через API:

rules={[
  {
    validator: async (_, value) => {
      const isAvailable = await checkUsernameAvailability(value);
      if (!isAvailable) {
        return Promise.reject('Имя уже занято');
      }
      return Promise.resolve();
    }
  }
]}

Настройка глобальных сообщений и локализация

Ant Design поддерживает локализацию сообщений валидации через ConfigProvider. Можно переопределять тексты ошибок по всему приложению:

import { ConfigProvider } from 'antd';
import ruRU from 'antd/locale/ru_RU';

<ConfigProvider locale={ruRU}>
  <App />
</ConfigProvider>

Это изменяет стандартные сообщения, такие как "This field is required" на "Пожалуйста, введите значение".

Итоговое использование

Комбинируя все вышеописанные возможности, можно строить формы любой сложности с точной настройкой правил, зависимостей, асинхронных проверок и кастомного отображения ошибок. Ant Design обеспечивает прозрачный API и удобный визуальный контроль ошибок для пользователей.

Оглавление