Formik Field 使用 Yup 验证

Question

我正在查看 docs，您可以通过将 validate 传递给 Field 来验证 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 上。

Formik Field 使用 Yup 验证

Formik Field validate using Yup

reactjs

formik

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