编辑：

Question

当前，我正在进行一些验证，例如最小长度，最大长度，必需项等，并结合使用Yup。我想知道是否可以在通过Yup验证后执行更多验证，这需要服务器端的请求和响应？

例如，我需要先输入一个有效的电话号码格式，然后再通过验证，然后我要向后端请求以检查此电话号码是否存在。如果已经存在，则设置错误。电话：“电话号码已经注册。”并使用{touched.phone && errors.phone && <p>{errors.phone}</p>}在ui中显示它。请帮我照亮。我找不到任何解决方案。

Answer 1

尝试使用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

Answer 2

您可以使用.test

如您在文档示例中所见

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

第三个参数可以是一个异步函数，在那里您将调用后端。

编辑：

如果您只想验证onBlur，则可以更改Formik Prop validateOnBlur和validateOnChange。
两者的默认值为true，但是如果将validateOnChange设置为false，则只会运行验证onBlur。请注意，这将发生在所有字段。

如果只发生在一个字段上，则需要使用字段的validate属性并传递一个接收字段touched的函数，以在调用异步函数之前对其进行检查。

通过validationSchema Yup之后，是否可以执行更多验证？

2 个答案:

编辑：