使用 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 进行验证
React JS:Yup & Formik 错误消息在提交时显示多次