React如何集中管理表单验证并复用重复验证规则

1. 所有表单验证schema统一存放在单个文件是否为合理实践？ #

这个方案没有绝对的对错，适配项目规模即可：

• 如果是小型项目，整体表单数量在10个以内，单文件存放完全合理，查找、修改规则的路径很短，没有额外维护负担。
• 如果是中大型项目，表单数量多、单个表单验证逻辑复杂，单文件会快速膨胀为数千行的巨石文件，不仅查找代码效率低，多人协作提交时也很容易出现Git合并冲突。这种场景更推荐按业务模块拆分文件：比如将登录、注册相关的验证规则放在src/schemas/auth.js，用户资料相关规则放在src/schemas/user.js，订单相关规则放在src/schemas/order.js，最后在src/schemas/index.js中统一导出所有schema，既保留了验证规则集中管理的优势，又不会让单个文件过于臃肿。

2. 如何避免重复编写相同的字段验证逻辑？ #

Yup本身的链式调用设计天然支持逻辑复用，你可以根据复用粒度选择对应方案，完全不需要重复编写相同代码：

• 最常用的方案是抽离公共单字段验证规则：把重复出现的字段校验（比如你提到的密码校验、手机号校验、邮箱校验）提前定义为独立的Yup校验对象，需要时直接引用即可。如果某个场景下该字段需要追加特殊校验规则，直接在引用后链式调用新的校验方法就行，不会影响其他场景的规则使用。
  示例代码：

// 提前定义所有场景通用的密码基础校验规则
const basePasswordRule = yup.string()
  .required("Password is required")
  .min(8, "Password length cannot be less than 8 characters")
  // 其他通用密码校验逻辑，比如必须包含数字、特殊字符等
  .matches(/\d/, "Password must contain at least one number")

// 登录表单直接引用基础规则
export const schemaLogin = yup.object().shape({
  username: yup.string().required("Username is required"),
  password: basePasswordRule
});

// 注册表单引用基础规则，无需重复编写通用逻辑
export const schemaRegister = yup.object().shape({
  username: yup.string().required("Username is required").matches(/^[0-9a-z]+$/),
  password: basePasswordRule,
  passwordConfirmation: yup.string()
    .required("Password confirmation is required")
    .oneOf([yup.ref("password"), null], "Passwords must match")
});

// 特殊场景可以在基础规则上追加校验，不会修改原基础规则
// 比如修改密码场景要求新密码不能和旧密码相同
export const schemaChangePassword = yup.object().shape({
  oldPassword: basePasswordRule,
  newPassword: basePasswordRule.notOneOf([yup.ref("oldPassword")], "New password cannot be the same as the old password")
})

• 如果是多字段组合的验证块复用：比如省、市、区、详细地址的校验规则，在收货地址、发票信息、自提点信息多个表单中都要用到，可以直接把这组字段的校验规则抽成独立的schema片段，使用时直接展开合并到目标schema中即可。
• 如果是需要传参的动态校验逻辑：比如校验字符串长度区间、校验值是否在指定列表内这类通用逻辑，可以通过Yup提供的自定义扩展方法注册全局校验规则，所有schema中都可以直接调用。

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