带有 yup 验证的对象或字符串类型有条件

mrk*_*rks 2 validation typescript reactjs yup formik

我在我的 React 应用程序yup中结合使用Formik来验证 TypeScript 模型/接口。我们之前有一个用于以下架构的 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()
});
Run Code Online (Sandbox Code Playgroud)

由于我们现在更改了界面,name因此description字段可以是 astringobject

我仍然想用 验证我的表单yup,所以我尝试使用name: yup.mixed()description: yup.mixed()但现在我明显遇到了min.().matches()函数的问题。

是否可能有stringORobject条件?所以如果是yup.string()then,min/max将被使用,否则只是yup.object().

Ven*_*sky 9

我寻找一种以简单方式执行此操作的方法,但找不到任何方法,但他们提供的解决方案是使用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
      }
    }),
    ...
})
Run Code Online (Sandbox Code Playgroud)

你可以做的另一种方法是这个gist
它创建了一个自定义方法,.addMethod用于接收模式并验证所有模式。不错的做法