如何使用Yup对含随机属性的表单对象进行动态校验？

数据老陈

2026-9-27

问题修复方案

核心问题原因

构造校验Schema的逻辑错误：你通过map生成的是对象数组，直接把数组展开传入shape()方法时，数组的索引会被当作对象的键，完全无法匹配你想要的字段-校验规则对应结构。
Yup默认规则问题：Yup.string().required()仅会校验值不是undefined或null，空字符串''会被判定为合法值，所以你示例里的空值不会触发校验错误。

修正后的代码

const validateForm = async (data) => {
  try {
    parametersFormRef.current.setErrors({});

    // 用reduce合并生成完整的校验规则对象
    const shapeRules = Object.keys(data).reduce((rules, parameter) => {
      rules[parameter] = Yup.string()
        .typeError("Test")
        .trim() // 自动过滤首尾空白字符
        .min(1, "字段不能为空") // 拦截空字符串场景
        .required("字段为必填项");
      return rules;
    }, {});

    const schema = Yup.object().shape(shapeRules);
    await schema.validate(data, { abortEarly: false });
    // 校验通过后的业务逻辑可在此处补充
  } catch (err) {
    console.error(err);
    const validationErrors = {};

    if (err instanceof Yup.ValidationError) {
      err.inner.forEach((error) => {
        validationErrors[error.path] = error.message;
      });
      // 把校验错误回填到表单
      parametersFormRef.current.setErrors(validationErrors);
    }
  }
};