使用 Yup 和 Formik 自动修剪空白

Posted

技术标签:

【中文标题】使用 Yup 和 Formik 自动修剪空白【英文标题】:Automatically trim white spaces with Yup and 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 修剪空白而不显示消息?那么在提交表单时自动修剪空格?

【问题讨论】:

你能展示你的完整代码吗? 【参考方案1】:

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

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

【讨论】:

谢谢。我可能最终只在提交时显示消息。【参考方案2】:

你可以这样做:

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

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

【讨论】:

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

以上是关于使用 Yup 和 Formik 自动修剪空白的主要内容,如果未能解决你的问题,请参考以下文章

使用 Formik 和 Yup 和 React-select 进行验证

使用 formik、yup 和 axios 去抖动

Formik 和 yup 验证不适用于所需

React JS:Yup & Formik 错误消息在提交时显示多次

Yup.mixed().test() 似乎破坏了 Formik 表单验证

Formik Yup `.test()` 自定义验证无法正常工作