React中如何实现React Hook Form TextField onChange实时验证

要让表单字段在内容变化时立即触发验证，只需调整React Hook Form的验证触发模式，以下是两种可行方案：

1. 全局配置（所有字段生效） #

在useForm初始化时添加mode: "onChange"，整个表单的所有字段都会在值变化时自动执行验证：

const useFunction = useForm({
  defaultValues: defaultValue,
  resolver: yupResolver(eventSchema),
  mode: "onChange" // 开启实时验证模式
});

2. 单个字段配置（仅目标字段生效） #

如果只想让特定字段开启实时验证，可在register方法中指定trigger: "onChange"：

<FormInputText
  name='title'
  type='text'
  control={control}
  label='Title'
  helperText={errors?.title?.message}
  errors={!!errors.title}
  register={register('title', {
    onChange: (e) => dispatch(setTitle(e.target.value)),
    trigger: "onChange" // 针对该字段开启实时验证
  })}
/>

补充说明 #

• 全局设置mode: "onChange"是更推荐的方式，能统一所有字段的验证时机；
• 你自定义的onChange逻辑（dispatch更新title）不会干扰验证触发，React Hook Form会在执行完你的逻辑后自动执行验证；
• 验证错误信息errors.title会随字段值变化实时更新，配合MUI的errors和helperText属性，可实时显示错误提示。

内容的提问来源于stack exchange，提问作者Kavan Kumar KR