Можно ли выполнить больше проверки после проверки validationSchema, Yup, пройдено? - PullRequest
Новая
       15

Можно ли выполнить больше проверки после проверки validationSchema, Yup, пройдено?

3 голосов
/ 23 мая 2019

В настоящее время я делаю некоторые проверки, такие как минимальная длина, максимальная длина, требуется и т. Д., Используя Yup в комбинации.Интересно, смогу ли я выполнить еще несколько проверок, которые требуют запроса и ответа со стороны сервера после того, как проверка Yup пройдена?

Например, мне нужно, чтобы сначала был введен правильный формат номера телефона, а после передачи проверки, затемЯ хочу запросить у своего бэкэнда проверить, существует ли этот номер телефона.Если он уже существует, просто установите error.phone: «Номер телефона уже зарегистрирован».и показать его внутри пользовательского интерфейса, используя {touched.phone && errors.phone && <p>{errors.phone}</p>}.Пожалуйста, помогите пролить мне немного света.Я не смог найти никаких решений для этого.

Ответы [ 2 ]

2 голосов
/ 23 мая 2019

Попробуйте использовать string.test(): 

phone: Yup.string()
        .matches(/phone-number-regex/, 'Invalide phone number')
        .test(
          'phone',
          'Phone number is already registered',
           async (value) => (await fetch(`/validate-phone/${value}`)).responseText === 'true',
        ),
...

Демо : https://runkit.com/fraction01/yup-async-test

1 голос
/ 23 мая 2019

Вы можете использовать .test

Как вы можете видеть на примере документации 

let asyncJimmySchema = string().test(
  'is-jimmy',
  '${path} is not Jimmy',
  async (value) => (await fetch('/is-jimmy/' + value)).responseText === 'true',
});

Третий параметр может быть асинхронной функцией, и там вы сделаете вызов своему бэкэнду.

Edit:

Если вы хотите проверить только onBlur, вы можете изменить Formik Prop validateOnBlur и validateOnChange.
Значением по умолчанию для обоих является true, но если вы установите для validateOnChange значение false, будут выполняться только проверки onBlur. Обратите внимание, что это произойдет со всеми полями .

Если вам нужно только, чтобы это произошло только с одним полем, вам нужно будет использовать validate prop поля и передать функцию, которая получает touched поля, чтобы проверить его перед вызовом асинхронного вызова. функция.

...