Создание простейшей схемы

Валидация данных в Yup строится вокруг декларативного описания схем, которые определяют структуру и правила проверки значений. Каждая схема представляет собой объект, описывающий тип данных и набор ограничений, применяемых к этому типу.

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

import * as Yup from 'yup';

После подключения библиотеки становится доступен набор методов для построения схем различной сложности.

Простейшая строковая схема

Наиболее базовый вариант схемы связан со строковыми значениями. Такая схема задаёт тип и минимальные требования к значению.

const nameSchema = Yup.string();

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

const nameSchema = Yup.string()
  .required()
  .min(2)
  .max(30);

Комбинация правил формирует цепочку валидации:

  • required() — обязательное наличие значения
  • min(n) — минимальная длина строки
  • max(n) — максимальная длина строки

Каждый метод возвращает новую схему, расширяя предыдущую.

Числовая схема с ограничениями

Для числовых данных применяется Yup.number(), позволяющий задавать диапазоны и дополнительные условия.

const ageSchema = Yup.number()
  .required()
  .min(0)
  .max(120);

Основные ограничения:

  • min(n) — минимальное допустимое значение
  • max(n) — максимальное допустимое значение
  • required() — обязательность поля

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

Формирование объектной схемы

Объектные схемы позволяют описывать структуру сложных данных, состоящих из нескольких полей. Для этого используется Yup.object() совместно с методом shape.

const userSchema = Yup.object().shape({
  name: Yup.string().required().min(2),
  age: Yup.number().required().min(18)
});

Каждое поле объекта описывается отдельной схемой, что обеспечивает модульность и читаемость.

Структура shape:

  • ключ объекта соответствует имени поля
  • значение — схема валидации для этого поля

Минимальная схема как композиция правил

Простейшая схема часто представляет собой набор нескольких независимых правил, объединённых в объект.

const schema = Yup.object().shape({
  username: Yup.string().required().min(3),
  email: Yup.string().required().email(),
  password: Yup.string().required().min(8)
});

В данном случае используются базовые типы и встроенные проверки формата, например email().

Выполнение проверки данных

Схема используется для синхронной или асинхронной проверки значений. Наиболее простой способ — вызов validateSync.

const data = {
  username: 'alex',
  email: 'alex@mail.com',
  password: '12345678'
};

const validated = schema.validateSync(data);

При несоответствии данным схемы генерируется исключение, содержащее информацию о нарушенных правилах.

Асинхронный вариант:

schema.validate(data)
  .then(valid => {
    // валидные данные
  })
  .catch(err => {
    // ошибки валидации
  });

Комбинация базовых типов и правил

Схемы Yup строятся из комбинации примитивных типов и цепочек ограничений. Основные элементы:

  • строковые схемы с ограничениями длины и формата
  • числовые схемы с диапазонами значений
  • булевы схемы без сложной логики
  • объектные схемы для структурирования данных

Каждый элемент схемы остаётся независимым, что позволяет переиспользовать отдельные части в разных контекстах.

Структурирование простой схемы формы

Минимальная форма данных обычно включает несколько полей с базовыми проверками:

const formSchema = Yup.object().shape({
  firstName: Yup.string().required().min(2),
  lastName: Yup.string().required().min(2),
  age: Yup.number().required().min(18),
  email: Yup.string().required().email()
});

Каждое поле описывается отдельной схемой, но объединяется в единый объект, формируя целостное описание структуры данных.

Оглавление