【问题标题】：Is it possible to perform more validation after validationSchema, Yup, is passed?通过validationSchema，是的，是否可以执行更多验证？
【发布时间】：2019-10-10 03:31:06
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs formik yup

【解决方案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

【讨论】：

我想在onBlur之后检查电话号码是否存在，我该怎么做？

【解决方案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 的函数以在调用异步函数之前对其进行检查。

【讨论】：

我想在onBlur之后检查电话号码是否存在，我该怎么做？
{touched.phone && errors.phone && <p>{errors.phone}</p>} 这将在 onBlur 和不匹配时显示错误。这不工作吗？如果这不起作用，请提供有关您的代码的更多信息
我会在复工后的几天内反馈。无论如何，谢谢@Vencovsky
嗨@Vencovsky，我现在设法让它工作，但它确实调用了我输入的后端单个单词以及onblur。但是我可以只在 onblur 之后检查而不是两者都检查吗，因为它总是请求后端太慢了？
@Vencovsky 这个编辑看起来不错，但我现在使用 formik 感到很沮丧。我曾经尝试自己将 onBlurHandler 方法添加到一个 Formik 字段中，然后字段总是在每次模糊时调用该方法。