Formik Field使用Yup进行验证

Question

我正在查看docs，您可以通过将Field传递给validate来验证Field，这是一个函数。

例如

const validate = value => {
  let errorMessage;
  if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
    errorMessage = 'Invalid email address';
  }
  return errorMessage;
};

...

<Field validate={validate} name="email" type="email" />

如何替换函数validate来使用Yup？

如果您要问为什么我要这样做...

由于我的表单是动态生成的，因此我想将validationSchema验证对象直接传递给Yup，而不是拥有巨大的Field对象。

Answer 1

出于某些原因，Formik似乎没有提供本地执行此操作的方法。您可以这样：

<Field
  name="email"
  type="email"
  validate={value =>
    Yup.string()
      .matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, "Invalid")
      .validate(value)
      .then(() => undefined)
      .catch(({ errors }) => errors[0])
  }
/>

Working example在CodeSandbox上。