【问题标题】：Formik Field validate using Yup使用 Yup 验证 Formik 字段
【发布时间】：2019-09-29 16:37:25
【问题描述】：

我正在查看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，因为我的表单是动态生成的。

【问题讨论】：

为什么投反对票？
不知道为什么你被否决了，这个问题没有错。我会投票补偿。

标签： reactjs formik

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

【讨论】：