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

Question

我在我的 React 应用程序中结合使用 yup 和 Formik 来验证 TypeScript model/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().

Answer 1

我想找一种简单的方法来做到这一点，但找不到任何方法，但他们给出的解决方案是使用 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 创建一个自定义方法，该方法接收模式并验证所有模式。相当不错的方法

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

Object or String type conditional with yup validation

validation

typescript

reactjs

yup

formik