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

Метод 1: использование метода «oneOf».
Метод «oneOf» в Yup позволяет нам сравнивать значение одного поля с другим. В случае подтверждения пароля мы можем использовать его для сравнения полей «пароль» и «confirmPassword». Вот как это можно реализовать:

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

Метод 2: использование метода «тест».
Метод «тест» в Yup включает пользовательскую логику проверки. Мы можем использовать его для сравнения значений полей пароля и предоставления специального сообщения об ошибке, если они не совпадают. Вот пример:

import * as Yup from 'yup';
const schema = Yup.object().shape({
  password: Yup.string().required('Password is required'),
  confirmPassword: Yup.string()
    .required('Please confirm your password')
    .test('password-match', 'Passwords must match', function (value) {
      return this.parent.password === value;
    }),
});

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

import * as Yup from 'yup';
const schema = Yup.object().shape({
  password: Yup.string().required('Password is required'),
  confirmPassword: Yup.string().when('password', {
    is: (password) => password && password.length > 0,
    then: Yup.string()
      .required('Please confirm your password')
      .oneOf([Yup.ref('password'), null], 'Passwords must match'),
  }),
});

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

Помните, что проверка вводимых пользователем данных имеет решающее значение для любого веб-приложения, и да, делает это проще, чем когда-либо прежде!