javascript - Formik - 嵌套字段验证
问题描述
我有带有数字输入的嵌套字段,无法使验证正常工作。不确定这是否是 formik 或是的 / 验证模式是如何声明的问题,但我会在这里开始提问。
在示例中,我有两个表示数字的字段,默认为空字符串。验证适用于第一个字段,但我无法让它对嵌套字段表现相同。当我触摸该字段但不输入任何内容时,它会返回:
social.facebook 必须是一个
number
类型,但最终值是:(NaN
从 value转换""
)。
示例:代码框
解决方案
似乎是 formik 的问题,带有嵌套字段验证!当它的数字和值用空字符串初始化时,最后抛出该错误
您可以通过在它是空字符串时将其转换为 null 来解决它,然后在 validationSchema 中将其设置为可为空,如下所示
validationSchema={Yup.object().shape({
email: Yup.number(),
social: Yup.object().shape({
facebook: Yup.number()
.transform((value, originalValue) => originalValue.trim() === "" ? null: value)
.nullable()
})
})}
见代码沙箱
为了进一步验证,如果您想要仅数字的特殊消息,请添加.typeError("your message")
如下 :
validationSchema={Yup.object().shape({
email: Yup.number().typeError("must be a number"),
social: Yup.object().shape({
facebook: Yup.number()
.typeError("must be a number")
.transform((value, originalValue) => originalValue.trim() === "" ? null: value)
.nullable()
})
})}
PS:您可以将初始值设置为 , null 用于数字并将 .nullable() 添加到 schenma 。