React中如何为不同输入配置不同的Yup表单校验触发模式

实现方案 #

方案1：控制特定字段的错误展示时机（改动最小，推荐） #

不需要修改原有的校验配置，仅调整错误展示的判断条件即可实现需求：

1. 先从formState中解构出isSubmitted状态，用来判断表单是否已经触发过提交：

const {
  register,
  handleSubmit,
  setError,
  formState: { errors, isSubmitted }, // 新增isSubmitted状态
  trigger,
  setValue,
  watch,
  clearErrors
} = useForm({
  resolver: yupResolver(schema),
  mode: "onTouched"
});

2. 修改需要仅提交时校验的字段的错误展示逻辑，只有表单提交过之后才显示错误：

{/* 原错误提示逻辑 */}
{/* {errors.test && <p>{errors.test.message}</p>} */}
{/* 修改为如下逻辑 */}
{isSubmitted && errors.test && <p>{errors.test.message}</p>}

该方案完全不影响原有校验逻辑和其他字段的onTouched规则，提交后修改字段时也会正常触发实时校验。

方案2：完全禁用特定字段的onBlur校验触发 #

如果你希望目标字段连失焦时的校验执行都要跳过，仅在提交时才跑校验，可以在注册字段时覆盖默认的onBlur事件，阻止默认的touched标记更新和校验触发：

<input
  {...register("test", { required: true })}
  name="test"
  placeholder="test"
  {/* 覆盖默认onBlur逻辑 */}
  onBlur={() => {}}
/>

该方案会让目标字段永远不会被标记为已失焦，自然不会触发onTouched模式下的校验，只会在表单提交时执行全量校验并提示错误。

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