我正在使用 yup
结合 Formik
在我的 React 应用程序中验证 TypeScript 模型/接口(interface)。
我们之前有一个用于以下架构的 yup.object:
export const InputSchema = yup.object({
id: yup.string(),
name: yup.string().required().min(MIN_DESC_LENGTH).max(_MAX_NAME_LENGTH),
description: yup.string().required().matches(/(?!^\d+$)^[\s\S]+$/, 'Please enter a valid description').min(MIN_DESC_LENGTH).max(_MAX_DESC_LENGTH),
contact: yup.string().required()
});
当我们现在改变我们的界面时,
name
和 description
字段可以是 string
或 object
.我仍然想用
yup
验证我的表单,所以我尝试使用 name: yup.mixed()
和 description: yup.mixed()
但现在我明显遇到了 min.()
的问题和 .matches()
职能。是否可以有一个
string
或 object
健康)状况?所以如果是 yup.string()
那么,min/max
将被使用,否则只是 yup.object()
.
最佳答案
我寻找一种简单的方法来做到这一点,但找不到任何方法,但他们给出的解决方案是使用 yup.lazy
.
对于你的情况,这将是
Yup.object({
...
name: Yup.lazy(value => {
switch (typeof value) {
case 'object':
return Yup.object(); // schema for object
case 'string':
return Yup.string().min(MIN_DESC_LENGTH).max(_MAX_NAME_LENGTH); // schema for string
default:
return Yup.mixed(); // here you can decide what is the default
}
}),
...
})
另一种方法是这样的 gist .
它使用
.addMethod
创建自定义方法接收模式并验证所有模式。不错的做法
关于reactjs - 带有 yup 验证的对象或字符串类型有条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59213182/