在validationSchema（是的）通过后是否可以执行更多验证？

Question

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

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

Answer 1

您可以使用.test

正如您在文档示例中看到的

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

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

编辑：

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

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