5

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

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

4

2 回答 2

2

您可以使用.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字段的函数以在调用异步函数之前对其进行检查。

于 2019-05-23T14:32:39.740 回答
2

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

于 2019-05-23T14:36:53.200 回答