结合vee-validate与Yup如何为动态字段动态添加验证规则

更推荐在初始schema声明阶段集成动态字段规则生成，不建议等schema实例生成完再手动遍历追加。
原因很直接：

• Yup的schema实例本身是不可变设计，拿到实例后手动修改内部结构追加规则，很容易破坏实例的校验逻辑一致性，后续升级Yup版本也容易出现兼容问题
• 如果在schema生成后再做遍历追加，这部分逻辑已经脱离了computed的依赖收集链路，很容易因为响应式追踪不全导致fields更新后schema没有同步刷新
• 两处拆分的schema定义会提升后续维护成本，排查校验规则问题时需要在多个代码段之间跳转

第一次尝试的写法拿不到字段元属性，本质是回调挂载的位置错了：
你把Yup.lazy挂在了value字段的校验规则上，这个回调触发时拿到的入参只有当前value字段的取值，自然读不到同层级的type、required等元属性，和响应式没关系，是结构设计的问题。
而且从你的目标schema来看，你需要生成的example_integer、example_string是和category平级的根层级字段，本来就不需要嵌套在fields数组结构里，之前的嵌套写法从结构上就和实际的校验目标不匹配。

1. 抽离单字段规则生成的公共方法，避免把类型判断、必填判断的逻辑堆在computed里：

// 单个动态字段的规则生成逻辑
function generateFieldRule(fieldMeta) {
  let baseValidator;
  // 按字段类型匹配基础校验规则
  switch(fieldMeta.type) {
    case 'integer':
    case 'number':
      baseValidator = Yup.number();
      break;
    case 'boolean':
      baseValidator = Yup.boolean();
      break;
    case 'string':
    default:
      baseValidator = Yup.string();
  }
  // 根据必填标记追加校验规则
  if (fieldMeta.required) {
    baseValidator = baseValidator.required();
  } else {
    // 非必填字段默认允许null值，避免空值触发无效报错
    baseValidator = baseValidator.nullable();
  }
  return baseValidator;
}

2. 在computed的schema生成流程里，直接把遍历生成的动态规则和静态规则合并，一次生成完整的schema：

computed: {
  schema() {
    // 遍历fields生成动态规则映射，这一步会被Vue正常追踪响应式依赖
    const dynamicRules = this.fields.reduce((ruleMap, field) => {
      // Vue的Proxy代理是透明的，直接读取属性就能拿到原始值，不需要特殊解包
      ruleMap[field.name] = generateFieldRule(field);
      return ruleMap;
    }, {});

    // 静态规则和动态规则合并，直接传入Yup的shape配置
    return Yup.object().shape({
      category: Yup.object().shape({
        name: Yup.string().max(255).required()
      }),
      ...dynamicRules
    });
  }
}

如果你后续确实需要把动态字段嵌套在fields数组结构里，只需要把Yup.lazy的挂载位置从value字段调整到数组元素层级，就能拿到完整的字段元信息：

// 嵌套数组场景的正确写法
Yup.array().of(
  Yup.lazy((fieldItem) => {
    // 这里能拿到包含type、required、value的完整字段对象
    const fieldRule = generateFieldRule(fieldItem);
    return Yup.object().shape({
      value: fieldRule
    });
  })
)

内容的提问来源于stack exchange，提问作者SPQRInc