Yup валидатор

Библиотека Yup реализует декларативный подход к валидации данных через схемы. Основная идея заключается в том, что структура данных описывается отдельной схемой, а проверка значений выполняется автоматически на основе заданных правил.

Схема в Yup представляет собой объект, описывающий ожидаемую форму данных: типы полей, ограничения, условия обязательности и дополнительные правила. Такой подход позволяет отделить бизнес-логику от валидации и делает код более предсказуемым.

Ключевая особенность заключается в иммутабельности схем: каждый метод возвращает новую схему, не изменяя исходную.

Базовые типы данных

Yup предоставляет набор примитивных типов, соответствующих основным структурам данных Jav * aScript:

  • строка (string)
  • число (number)
  • булево значение (boolean)
  • дата (date)
  • массив (array)
  • объект (object)

Каждый тип поддерживает собственный набор методов валидации.

Пример базового описания схемы:

import * as Yup from "yup";

const schema = Yup.object({
  name: Yup.string(),
  age: Yup.number(),
  isActive: Yup.boolean()
});

Валидация строк

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

Основные методы:

  • required() — обязательное поле
  • min(n) — минимальная длина
  • max(n) — максимальная длина
  • email() — проверка email-формата
  • matches(regex) — проверка по регулярному выражению
  • trim() — удаление пробелов по краям

Пример:

const schema = Yup.object({
  username: Yup.string()
    .required()
    .min(3)
    .max(20)
    .matches(/^[a-zA-Z0-9_]+$/)
});

Строковая валидация часто используется для форм регистрации, авторизации и пользовательских профилей.

Числовая валидация

Числовой тип поддерживает проверку диапазонов и ограничений значений.

Основные методы:

  • min(n) — минимальное значение
  • max(n) — максимальное значение
  • positive() — только положительные числа
  • negative() — только отрицательные числа
  • integer() — только целые числа

Пример:

const schema = Yup.object({
  price: Yup.number()
    .required()
    .positive()
    .max(1000)
});

Особенность числовой валидации заключается в строгом приведении типов, поэтому строковые значения могут быть преобразованы при необходимости.

Работа с объектами

Объектная схема позволяет описывать вложенные структуры данных.

const schema = Yup.object({
  user: Yup.object({
    name: Yup.string().required(),
    age: Yup.number().min(18)
  })
});

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

Дополнительно доступны методы:

  • noUnknown() — запрет лишних полей
  • shape() — описание структуры объекта

Массивы и их ограничения

Массивы в Yup описываются через array() и позволяют задавать тип элементов.

const schema = Yup.object({
  tags: Yup.array()
    .of(Yup.string().min(2))
    .min(1)
    .max(10)
});

Основные методы:

  • of(schema) — схема элементов
  • min(n) — минимальное количество элементов
  • max(n) — максимальное количество элементов
  • compact() — фильтрация значений

Массивная валидация часто применяется в тегах, списках идентификаторов и динамических формах.

Проверка обязательности и nullable значений

По умолчанию поля считаются необязательными. Для явного указания используется required().

Yup.string().required()

Методы:

  • required() — обязательное поле
  • nullable() — допускается null
  • default(value) — значение по умолчанию
const schema = Yup.object({
  description: Yup.string().nullable().default("нет описания")
});

Пользовательские проверки (custom tests)

Гибкость Yup достигается через метод test(), позволяющий задавать собственные правила.

const schema = Yup.object({
  password: Yup.string().test(
    "strong-password",
    "Слабый пароль",
    value => /[A-Z]/.test(value) && /\d/.test(value)
  )
});

test() принимает:

  • имя проверки
  • сообщение об ошибке
  • функцию-валидатор

Это позволяет реализовать любые бизнес-правила, не ограничиваясь стандартными методами.

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

Yup поддерживает асинхронные проверки, например обращение к серверу.

const schema = Yup.object({
  email: Yup.string().test(
    "check-email",
    "Email занят",
    async (value) => {
      const response = await fetch(`/api/check?email=${value}`);
      const data = await response.json();
      return data.available;
    }
  )
});

Асинхронная валидация особенно важна для проверки уникальности данных.

Трансформации данных

Схемы поддерживают предварительную обработку значений через transform().

Yup.string().transform(value => value.trim())

Использование трансформаций позволяет нормализовать данные до проверки.

Примеры:

  • удаление пробелов
  • приведение регистра
  • преобразование строк в числа

Условная логика (when)

Метод when() позволяет задавать зависимости между полями.

const schema = Yup.object({
  isCompany: Yup.boolean(),
  companyName: Yup.string().when("isCompany", {
    is: true,
    then: schema => schema.required()
  })
});

Это ключевой механизм для динамических форм.

Работа с ошибками

Ошибки валидации представляют собой структурированные объекты, содержащие:

  • путь до поля
  • сообщение
  • тип ошибки
schema.validate(data)
  .catch(err => console.log(err.errors));

Метод validate() возвращает промис, что позволяет интегрировать библиотеку в асинхронные потоки данных.

Методы валидации

Основные методы выполнения проверки:

  • validate() — полная проверка объекта
  • validateSync() — синхронная версия
  • isValid() — проверка без выбрасывания ошибок
  • cast() — приведение типов
const result = await schema.isValid(data);

Приведение типов (casting)

Yup умеет преобразовывать входные данные в нужный формат.

Yup.number().cast("42") // 42

Это особенно полезно при работе с формами, где все значения приходят как строки.

Интеграция со структурами форм

Схемы часто используются в связке с формами и библиотеками управления состоянием.

Основные сценарии:

  • клиентская валидация перед отправкой
  • проверка данных на лету
  • синхронизация ошибок с UI

Схемы позволяют централизовать правила и избегать дублирования логики.

Особенности архитектуры схем

Подход Yup основан на композиции:

  • каждая схема является независимой
  • схемы можно комбинировать
  • правила строятся цепочками методов

Это делает систему расширяемой и предсказуемой при росте сложности приложения.

Оглавление