使用Yup库处理动态类型数组的验证方案

Yup是一个流行的JavaScript对象模式验证库，广泛应用于表单验证和数据校验场景。在实际开发中，我们经常会遇到需要验证包含不同类型对象的动态数组的情况，比如问卷调查系统中的问题列表。

动态数组验证的挑战

在问卷调查系统中，通常会包含多种类型的问题：

• 文本输入题（单行文本）
• 多行文本题
• 数字输入题
• 选择题（单选/多选）

每种问题类型都有不同的字段结构和验证规则，这给数据验证带来了挑战。传统静态验证方案无法处理这种动态类型的情况。

Yup的lazy验证方案

Yup提供了lazy方法来解决这类问题。lazy允许我们根据当前值动态返回不同的验证模式。核心思路是：

1. 为数组中的每个元素定义一个类型判断条件
2. 根据类型返回对应的验证模式
3. 处理未知类型的默认情况

实现代码示例

import * as Yup from "yup";

const questionnaireSchema = Yup.object().shape({
  questionnaire: Yup.object().shape({
    name: Yup.string().required("问卷名称必填"),
    description: Yup.string().required("问卷描述必填"),
    questions: Yup.array()
      .of(
        Yup.lazy((item) => {
          switch (item.type) {
            case "text":
              return Yup.object().shape({
                id: Yup.string().required("问题ID必填"),
                text: Yup.string().required("问题文本必填"),
                type: Yup.string().required("问题类型必填"),
                answer: Yup.string().required("答案必填"),
              });
            case "multiline":
              return Yup.object().shape({
                id: Yup.string().required("问题ID必填"),
                text: Yup.string().required("问题文本必填"),
                type: Yup.string().required("问题类型必填"),
                answer: Yup.string().required("答案必填"),
              });
            case "number":
              return Yup.object().shape({
                id: Yup.string().required("问题ID必填"),
                text: Yup.string().required("问题文本必填"),
                type: Yup.string().required("问题类型必填"),
                NumValue: Yup.number().required("数值答案必填"),
              });
            case "choice":
              return Yup.object().shape({
                id: Yup.string().required("问题ID必填"),
                type: Yup.string().required("问题类型必填"),
                availableColours: Yup.array()
                  .of(Yup.string().required())
                  .required("选项列表必填"),
                favColours: Yup.string().required("选择答案必填"),
              });
            default:
              return Yup.object();
          }
        })
      )
      .required("问题列表不能为空"),
  }),
});

方案优势分析

1. 灵活性：能够根据数据类型动态调整验证规则
2. 可维护性：每种类型的验证规则集中管理，便于修改
3. 可扩展性：新增问题类型只需添加新的case分支
4. 错误信息定制：可以为每种字段提供特定的错误提示

实际应用建议

1. 类型安全：在使用TypeScript时，可以结合联合类型确保类型安全
2. 性能考虑：对于大型数组，验证可能会有性能影响，建议分页或分批验证
3. 默认值处理：可以在验证前为缺失字段设置合理默认值
4. 错误收集：使用validate或validateSync方法收集所有验证错误

总结

Yup的lazy验证方法为解决动态类型数组验证提供了优雅的解决方案。通过这种方法，开发者可以构建灵活、可维护的数据验证逻辑，特别适合处理包含多种类型元素的复杂数据结构。在实际项目中，这种技术可以广泛应用于问卷调查、动态表单、配置系统等各种需要处理异构数据的场景。