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

Метод 1: использование метода «когда»
Да, существует мощный метод под названием when, который позволяет определять правила условной проверки на основе значений других полей. Вот пример:

import * as Yup from 'yup';
const schema = Yup.object().shape({
  firstName: Yup.string().required('First name is required'),
  lastName: Yup.string(),
  isCompany: Yup.boolean(),
  companyName: Yup.string().when('isCompany', {
    is: true,
    then: Yup.string().required('Company name is required'),
    otherwise: Yup.string(),
  }),
});

В приведенном выше коде поле companyNameстановится обязательным только в том случае, если для поля isCompanyустановлено значение true. В противном случае это поле является необязательным.

Метод 2: использование метода «тест».
Да, также предусмотрен универсальный метод test, который позволяет определять собственные правила проверки на основе условий. Вот пример:

import * as Yup from 'yup';
const schema = Yup.object().shape({
  age: Yup.number().required('Age is required'),
  hasLicense: Yup.boolean(),
  licenseNumber: Yup.string().test('required-license', 'License number is required', function (value) {
    return this.parent.hasLicense === true ? !!value : true;
  }),
});

В этом случае поле licenseNumberстановится обязательным только в том случае, если для поля hasLicenseустановлено значение true. В противном случае это поле является необязательным.

Метод 3: использование метода «когда» с динамическими условиями
Да, позволяет определить динамические условия для условной проверки. Это полезно, когда условие зависит от нескольких полей или сложной логики. Вот пример:

import * as Yup from 'yup';
const schema = Yup.object().shape({
  email: Yup.string().required('Email is required'),
  isPreferredContact: Yup.boolean(),
  phone: Yup.string().when(['isPreferredContact', 'email'], {
    is: (isPreferredContact, email) => !isPreferredContact && !email,
    then: Yup.string().required('Phone number is required'),
    otherwise: Yup.string(),
  }),
});

В этом примере поле phoneстановится обязательным только в том случае, если не выбраны поля isPreferredContactи email.

В этой статье мы рассмотрели различные методы условного назначения полей обязательными с помощью Yup в React. Мы использовали метод Юпа whenдля определения правил на основе значений других полей и метод testдля создания собственной логики проверки. Реализуя эти методы, вы можете улучшить свои формы React с помощью динамической и надежной проверки.

Не забудьте импортировать Yup в свой проект и определить схему проверки для эффективного применения этих методов. Приятного кодирования!