使用 Yup 和 Formik 自动修剪空白答案

【问题标题】：Automatically trim white spaces with Yup and Formik使用 Yup 和 Formik 自动修剪空白
【发布时间】：2020-06-10 21:15:58
【问题描述】：

我正在使用在模式上定义的 Formik React Form 和 Yup 验证：

export const Contact = yup.object<IContact>().shape({
  contactName: yup
    .string()
    .trim('The contact name cannot include leading and trailing spaces')
    .strict(true)
    .min(1, 'The contact name needs to be at least 1 char')
    .max(512, 'The contact name cannot exceed 512 char')
    .required('The contact Name is required'),
});

有没有办法让 Yup 修剪空白而不显示消息？那么在提交表单时自动修剪空格？

【问题讨论】：

你能展示你的完整代码吗？

标签： reactjs typescript validation formik yup

【解决方案1】：

有没有办法让 Yup 修剪空白而不显示消息

不在单个转换中。 formik 使用的 yup 转换仅用于验证。您可以在传递数据之前创建一个单独的转换来使用，但它更简单，只需 valueToUse = userValue.trim() 自己。

【讨论】：

谢谢。我可能最终只在提交时显示消息。

【解决方案2】：

你可以这样做：

onSubmit={(values) => {
  const castValues = Contact.cast(values)
})

参考： https://github.com/jaredpalmer/formik/issues/473#issuecomment-499476056

【讨论】：

谢谢，但这不是我想要的。我知道可以通过这种方式完成，但问题在于自动完成。所以这个想法是在没有手动代码操作的情况下做到这一点。为此，我创建了自己的单独转换。