Да, проверка с двумя связанными полями

Question

Я использую formik для управления формой реагировать, у меня есть вопрос о проверке с Yup.

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

В массиве страны у нас есть регулярное выражение для проверки почтового индекса, и идея состоит в том, чтобы проверить введенный почтовый индекс, используя регулярное выражение текущей выбранной страны, кто-то может дать подсказку, как это сделать.

Answer 1

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

const validationSchema = Yup.object().shape({
    num1: Yup.number().positive().required('This field is required.'),
    num2: Yup.number().positive().required('This field is required.'),
    num3: Yup.number().positive().required('This field is required.').when(['num1', 'num2'], (num1, num2, schema) => {
        return num1 > 0 && num2 > 0 ? schema.max(num1 / num2) : schema.max(0);
    })
});

Answer 2

Вот пример принудительного использования даты окончания для datepicker after дата начала:

      const schema = Yup.object().shape({
    start_date: Yup.date()
        .typeError('Start Date is required')
        .required('Start Date is required'),
    end_date: Yup.date()
        .typeError('End Date is required')
        .required('End Date is required')
        .when('start_date', (start_date) => {
            if (start_date) {
                return Yup.date()
                    .min(start_date, 'End Date must be after Start Date')
                    .typeError('End Date is required')
            }
        }),
})

Требовалось поставить if оператор для правильной проверки во время загрузки формы, а также необходимо было поместить typeError правило, чтобы правильно проверить, когда была выбрана начальная дата, а конечная - еще не была.

Важно то, что вы можете увидеть использование when; первый параметр - это поле для проверки, а второй параметр - это функция проверки, которая возвращает объект проверки Yup.

Я попытался просто вернуть true или false, но, похоже, это вызывало ошибки, поэтому это немного сложнее, чем просто функция чистой проверки.

Answer 3

Проверка с использованием значения другого поля формы с помощью Yup test().

Вы можете получить доступ к значению любого поля формы, разрушив родительский элемент, например const { country } = this.parent;

      const yup = require("yup");

const schema = yup.object({
  country: yup.object().required("This field is required"),
  zipcode: yup
    .string()
    .required("This field is required")
    .test("is-right-zipcode", "Invalid zipcode", function(code) {
      const { country } = this.parent;
      return code.match(country.regex);
    })
});

Answer 4

У меня была точно такая же проблема. Я мог использоватьwhen решить это.

import { object, string } from 'yup';

const validCountries = ['US', 'CA'];

const zipRegexes = {
    US: /^\d{5}(?:-?\d{4})?$/,
    CA: /^[ABCEGHJKLMNPRSTVXY]\d[A-Z]\d[A-Z]\d$/
};

const addressSchema = object().shape({
    country: string()
        .oneOf(validCountries, 'Please select a country from the list above')
        .required('Please select a country from the list above'),
    /* Other fields
    .
    .
    .
    */
    zip: string()
        .trim()
        .required('Required')
        .transform(value => value.toUpperCase())
        .when('country', (country, schema) => {
            if (
                string()
                    .oneOf(validCountries)
                    .required()
                    .isValid(country)
            ) {
                return schema.matches(
                    zipRegexes[country],
                    `not a valid ${country} zip code`
                );
            }

            return schema;
        })
});

Answer 5

let schema = object({
  isBig: boolean(),
  count: number()
    .when('isBig', {
      is: true, // alternatively: (val) => val == true
      then: yup.number().min(5),
      otherwise: yup.number().min(0),
    })
});

Answer 6

Использование .when() и передайте ему функцию, которая возвращает схему для почтового индекса в зависимости от значения страны.

Answer 7

Вы можете выполнить условную проверку на основе массива полей. Пример ниже сделает field6 требуется, только если хотя бы один из field1 - field5 не указано.

      let schema = object({
  field1: Yup.bool(),
  field2: Yup.bool(),
  field3: Yup.bool(),
  field4: Yup.bool(),
  field5: Yup.bool(),
  field6: Yup.bool().when(
    [
      'field1',
      'field2',
      'field3',
      'field4',
      'field5',
    ],
    {
      is: (...fields) => fields.some(Boolean),
      then: Yup.bool().notRequired(),
      otherwise: Yup.bool().required(),
    }
  ),
});