如何在react-hook-form中为特定Controller输入项设置不同校验模式

react-hook-form的全局mode配置是统一控制所有字段的校验时机，但Controller组件本身并没有提供单独的mode属性来覆盖全局配置。要给特定字段修改校验时机，可以通过手动控制校验触发时机来实现，以下是具体方案：

核心思路 #

全局配置mode: 'onChange'时，所有字段默认会在值变化时自动校验。如果要让某个字段改用其他校验时机（比如onBlur），需要：

1. 阻止该字段在onChange时自动校验
2. 在目标时机（如失去焦点）手动触发该字段的校验

代码实现示例 #

以你的fecha字段为例，修改后的Controller代码如下：

import { useForm, Controller } from 'react-hook-form';

// 初始化formMethods
const formMethods = useForm({ mode: 'onChange' });
const { control, setValue, trigger } = formMethods;

// Controller组件
<Controller
  control={control}
  name="fecha"
  defaultValue={null}
  rules={{
    required: { value: true, message: 'Fecha es requerida' },
    // 其他校验规则...
  }}
  render={({
    field: { value, ref }, // 不再使用默认的onChange
    fieldState: { error }
  }) => (
    <input
      type="date"
      value={value || ''}
      ref={ref}
      // 只更新值，不触发校验
      onChange={(e) => {
        setValue('fecha', e.target.value, { shouldValidate: false });
      }}
      // 失去焦点时手动触发校验
      onBlur={() => {
        trigger('fecha');
      }}
      className={error ? 'input-error' : ''}
    />
  )}
/>

关键说明 #

• setValue的第三个参数{ shouldValidate: false }：告诉react-hook-form在更新值时不要自动校验该字段，覆盖全局onChange的校验行为
• trigger('fecha')：手动触发指定字段的校验，这里选择在onBlur事件中调用，就实现了该字段的onBlur校验模式
• 如果需要其他校验时机（比如提交时才校验），只需要把trigger调用放到对应时机的事件中即可

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