yup+react-hook-form能否在同表单触发不同校验schema及实现方法

该需求完全可以实现，不需要拆分表单、不需要写重复的字段渲染逻辑，用轻量的方式就能做到。

你当前使用的是react-hook-form + yup的技术栈，核心思路是不要把校验schema固定死在表单初始化的resolver里，而是在提交触发时动态匹配对应schema，校验通过后再走提交逻辑，具体实现步骤如下：

• 给两个提交按钮加上自定义data-*属性，标记各自对应的校验schema
• 给form标签绑定统一的提交事件，通过原生事件的submitter属性拿到当前触发提交的按钮，匹配对应的schema
• 直接调用yup实例的validate方法执行校验，校验失败就把错误同步到react-hook-form的错误状态中，正常渲染错误提示；校验通过就执行后续的业务提交逻辑

完整可参考代码 #

原有两个schema的定义不需要改动，表单部分调整为如下写法：

// 补充从useFormContext解构需要的方法
const { getValues, setError } = useFormContext();

// 统一提交处理逻辑
const handleFormSubmit = async (e) => {
  e.preventDefault();
  // 获取当前触发提交的按钮绑定的schema标识
  const schemaKey = e.nativeEvent.submitter.dataset.schema;
  const activeSchema = schemaKey === 'schema1' ? schema1 : schema2;
  // 拿到当前全量表单值
  const formValues = getValues();

  try {
    // 执行对应schema的校验，abortEarly设为false可以一次性返回所有字段错误
    const validValues = await activeSchema.validate(formValues, { abortEarly: false });
    // 校验通过，执行原有onSubmit业务逻辑
    await onSubmit(validValues);
  } catch (err) {
    // 把yup返回的校验错误格式转换成react-hook-form识别的格式，同步到表单错误状态
    const fieldErrors = err.inner.reduce((res, item) => {
      res[item.path] = {
        message: item.message,
        type: 'manualValidate'
      };
      return res;
    }, {});
    setError(fieldErrors);
  }
};

return (
  <form onSubmit={handleFormSubmit}>
    <input name="input1" /> 
    <input name="input2" />  

    {/* 给按钮加data-schema属性标记对应校验规则 */}
    <button type="submit" data-schema="schema1">button1</button>
    <button type="submit" data-schema="schema2">button2</button>
  </form>
)

方案优势 #

• 不需要额外声明react状态记录当前点击的按钮，没有多余的重渲染开销
• 完全保留原生表单的交互逻辑，比如输入框聚焦时按回车默认触发第一个提交按钮的行为和原生体验一致
• 两套校验schema完全独立，后续调整任意一套规则都不会影响另一套，维护成本低
• 不需要改动原有的错误提示UI逻辑，校验错误会和内置resolver校验的错误一样正常展示

不推荐用yup的when方法做分支判断的方式实现：如果后续新增更多提交按钮、校验规则差异变大，when里的分支判断会越堆越乱，可维护性远不如独立schema动态匹配的方案。

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