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

Метод 1: использование yup.ref()и .oneOf()
Да, позволяет нам ссылаться на другие поля в нашей схеме проверки с помощью метода yup.ref(). Мы можем использовать эту функцию для сравнения значений полей формы. Например, давайте сравним два поля пароля:

import * as Yup from 'yup';
const schema = Yup.object().shape({
  password: Yup.string().required('Password is required'),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], 'Passwords must match')
    .required('Confirm password is required'),
});

Метод 2: пользовательская функция проверки
Да, также предоставляется возможность создавать собственные функции проверки с помощью .test(). С помощью этого метода мы имеем полный контроль над логикой сравнения. Вот пример сравнения двух полей электронной почты:

import * as Yup from 'yup';
const schema = Yup.object().shape({
  email: Yup.string().required('Email is required'),
  confirmEmail: Yup.string()
    .required('Confirm email is required')
    .test('email-match', 'Emails must match', function (value) {
      return value === this.parent.email;
    }),
});

Метод 3: использование yup.ref()и .equals()
Да, также предусмотрен метод .equals(), который позволяет напрямую сравнивать значения. Мы можем объединить его с yup.ref()для сравнения полей формы. Вот пример сравнения двух полей даты:

import * as Yup from 'yup';
const schema = Yup.object().shape({
  startDate: Yup.date().required('Start date is required'),
  endDate: Yup.date()
    .required('End date is required')
    .test('date-match', 'End date must be the same as or after the start date', function (value) {
      return value.equals(this.parent.startDate);
    }),
});

Используя мощные функции Yup, мы можем легко сравнивать значения полей формы, чтобы обеспечить согласованность данных и улучшить взаимодействие с пользователем. В этой статье мы рассмотрели три метода: использование yup.ref()и .oneOf(), создание пользовательской функции проверки с помощью .test()и использование yup.ref()с .equals(). Не забудьте выбрать метод, который лучше всего подходит для вашего конкретного случая использования. Приятного кодирования!