yup

yup — это библиотека для валидации данных и построения схем в JavaScript. Она позволяет легко определять и проверять формы данных, обеспечивая мощный и гибкий API для работы с различными типами данных и валидацией.

Основные возможности yup

• Определение схем валидации для различных типов данных.
• Поддержка сложных условий валидации и составных схем.
• Интеграция с библиотеками для работы с формами, такими как Formik.
• Гибкость и расширяемость за счет пользовательских валидаторов.
• Поддержка локализации сообщений об ошибках.

Установка

npm install yup

Или с использованием Yarn:

yarn add yup

Основное использование

Для использования yup, необходимо создать схему валидации и вызвать методы проверки данных.

import * as yup from 'yup';

const schema = yup.object().shape({
  name: yup.string().required('Имя обязательно').min(3, 'Имя должно содержать минимум 3 символа'),
  age: yup.number().required('Возраст обязателен').positive('Возраст должен быть положительным числом').integer('Возраст должен быть целым числом'),
});

schema.validate({
  name: 'Александр',
  age: 25,
})
.then(data => {
  console.log('Данные валидны:', data);
})
.catch(err => {
  console.error('Ошибка валидации:', err.errors);
});

Определение схем

yup предоставляет методы для создания схем валидации для различных типов данных, включая строки, числа, массивы и объекты.

import * as yup from 'yup';

const stringSchema = yup.string().required('Поле обязательно').min(5, 'Минимум 5 символов');
const numberSchema = yup.number().required('Поле обязательно').positive('Число должно быть положительным').integer('Число должно быть целым');
const arraySchema = yup.array().of(yup.string().required('Элемент обязателен'));
const objectSchema = yup.object().shape({
  email: yup.string().email('Некорректный email').required('Email обязателен'),
  password: yup.string().min(8, 'Минимум 8 символов').required('Пароль обязателен'),
});

Кастомные валидаторы

Вы можете создавать собственные валидаторы, используя метод test.

import * as yup from 'yup';

const schema = yup.object().shape({
  username: yup.string().required().test('is-unique', 'Имя пользователя уже занято', async (value) => {
    const isUnique = await checkUsernameUniqueness(value);
    return isUnique;
  }),
});

async function checkUsernameUniqueness(username) {
  // Логика проверки уникальности имени пользователя
  return true; // или false
}

Валидация вложенных объектов

yup поддерживает валидацию вложенных объектов и массивов.

import * as yup from 'yup';

const schema = yup.object().shape({
  user: yup.object().shape({
    name: yup.string().required('Имя обязательно'),
    age: yup.number().required('Возраст обязателен').positive().integer(),
  }),
  roles: yup.array().of(yup.string().required('Роль обязательна')),
});

schema.validate({
  user: {
    name: 'Алексей',
    age: 30,
  },
  roles: ['admin', 'user'],
})
.then(data => {
  console.log('Данные валидны:', data);
})
.catch(err => {
  console.error('Ошибка валидации:', err.errors);
});

Интеграция с Formik

Formik — это популярная библиотека для управления формами в React. yup может быть использован для валидации данных в формах, создаваемых с помощью Formik.

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as yup from 'yup';

const validationSchema = yup.object().shape({
  email: yup.string().email('Некорректный email').required('Email обязателен'),
  password: yup.string().min(8, 'Минимум 8 символов').required('Пароль обязателен'),
});

const FormExample = () => (
   {
      console.log('Форма отправлена', values);
    }}
  >
    {({ isSubmitting }) => (
      

        
        
        
        
        
        
        Отправить
      
    )}
  
);

export default FormExample;

Локализация сообщений об ошибках

yup позволяет локализовать сообщения об ошибках валидации, используя метод setLocale.

import * as yup from 'yup';

yup.setLocale({
  mixed: {
    default: 'Неверное значение',
    required: 'Это поле обязательно для заполнения',
  },
  string: {
    min: 'Должно быть минимум ${min} символов',
    email: 'Некорректный email адрес',
  },
  number: {
    min: 'Число должно быть больше или равно ${min}',
  },
  // Добавьте другие локализации по необходимости
});

const schema = yup.object().shape({
  name: yup.string().required(),
  email: yup.string().email().required(),
});

schema.validate({
  name: '',
  email: 'notanemail',
})
.catch(err => {
  console.error('Ошибка валидации:', err.errors);
});

Заключение

yup — это мощная и гибкая библиотека для валидации данных и построения схем в JavaScript. Она обеспечивает удобный API для работы с различными типами данных, кастомными валидаторами и локализацией сообщений об ошибках. Интеграция с Formik делает yup отличным выбором для работы с формами в React-приложениях.