使用 Yup 和 Formik 自动 trim 空格

Question

我正在使用在架构上定义的 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 trim 空格不显示消息？所以在提交表单时自动trim输入空格？

Answer 1

Is there a way to have Yup trim white spaces without showing a message

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

Answer 2

你可以这样做：

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

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

使用 Yup 和 Formik 自动 trim 空格

Automatically trim white spaces with Yup and Formik

validation

typescript

reactjs

yup

formik