使用Yup时，如何获取所有验证通过的表单字段？

方法1：逐个验证Schema字段 #

直接遍历Schema的所有字段，对每个字段单独执行验证，收集验证成功的字段：

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  nickname: yup.string().optional(),
});

const form = { firstName: "Jane" };

// 获取Schema定义的所有字段名
const allFields = Object.keys(schema.fields);
const passedFields = [];

allFields.forEach(field => {
  try {
    // 单独验证当前字段的值
    schema.fields[field].validateSync(form[field], { abortEarly: false });
    passedFields.push(field);
  } catch (err) {
    // 验证失败则跳过该字段
  }
});

console.log(passedFields); // 输出: ["firstName", "nickname"]

方法2：通过失败字段反向推导 #

先获取所有验证失败的字段，再用Schema的全部字段减去失败字段，得到验证通过的字段：

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  nickname: yup.string().optional(),
});

const form = { firstName: "Jane" };

let failedFields = [];
try {
  // 开启abortEarly: false以收集所有失败字段
  schema.validateSync(form, { abortEarly: false });
} catch (err) {
  // 提取所有失败字段的路径
  failedFields = err.inner.map(item => item.path);
}

// 计算验证通过的字段
const allFields = Object.keys(schema.fields);
const passedFields = allFields.filter(field => !failedFields.includes(field));

console.log(passedFields); // 输出: ["firstName", "nickname"]

关键说明 #

• 对于optional()标记的字段，即使表单中没有对应值（如示例中的nickname），Yup会默认判定验证通过，因为optional()允许字段缺失或为undefined。
• 两种方法各有适用场景：字段数量较少时，逐个验证更直观；字段较多时，反向推导的方式性能更优。

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