如何基于Yup验证React项目中非用户输入来源的对象？

首先先修正你提供的Yup验证规则里的语法错误（多余的点号），修正后的规则如下：

export const userDetailValidation = Yup.object().shape({
  surname: Yup.string()
         .required("This field is required.")
         .max(50, "Maximum character is 50."),
  firstName: Yup.string()
         .required("This field is required.")
         .max(50, "Maximum character is 50.")
});

针对非用户输入的派生对象（比如你提供的userDetails），可以直接使用Yup的同步或异步验证方法：

方法一：同步验证（validateSync） #

适合不需要异步校验逻辑的场景，验证通过会返回原对象，失败则直接抛出错误：

const userDetails = {
  "id":1,
  "surname":"Wood",
  "firstName":"Victor"
};

try {
  // 执行同步验证
  const validatedData = userDetailValidation.validateSync(userDetails);
  console.log("验证通过：", validatedData);
} catch (error) {
  console.error("验证失败：", error.message);
  // 若需获取所有字段的错误信息，可访问error.inner
  // console.error("所有错误：", error.inner);
}

方法二：异步验证（validate） #

返回Promise，适合包含异步校验逻辑（比如远程校验唯一性）的场景：

const userDetails = {
  "id":1,
  "surname":"Wood",
  "firstName":"Victor"
};

userDetailValidation.validate(userDetails)
  .then(validatedData => {
    console.log("验证通过：", validatedData);
  })
  .catch(error => {
    console.error("验证失败：", error.message);
    // 查看所有字段错误
    // console.error("所有错误：", error.inner);
  });

补充说明 #

• 如果想一次性获取所有字段的错误，可在验证方法中传入{ abortEarly: false }参数，避免遇到第一个错误就停止校验。
• userDetails中的id字段不在验证规则内，Yup会默认忽略这类未定义的字段，不会影响验证结果。

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