如何在react-hook-form中通过代码触发指定表单字段的校验

问题原因 #

• 调用了已废弃的API：react-hook-form v7 及后续版本已经将triggerValidation方法重命名为trigger，旧API早已被移除，调用无任何响应属于预期行为。
• 触发时机错误：校验逻辑直接写在组件渲染顶层，执行这行代码时表单字段还未完成挂载注册，react-hook-form实例找不到myFieldName对应的字段，自然不会触发校验。

修正方案 #

如果需要在组件挂载完成后立刻触发指定字段的校验，把触发逻辑放到useEffect中执行即可，参考代码如下：

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

const CustomForm = () => {
  const formMethods = useForm({ mode: 'onSubmit' });
  // 使用新API trigger 替代废弃的 triggerValidation
  const { trigger, register } = formMethods;

  useEffect(() => {
    // 等组件挂载、表单字段注册完成后再触发校验
    trigger('myFieldName');
  }, [trigger]);

  return (
    <FormContext {...formMethods}>
      {/* 表单字段需正确注册，name属性和校验目标保持一致 */}
      <input 
        {...register('myFieldName', { 
          required: '该字段为必填项'
          // 其余校验规则
        })} 
      />
      {/* 其余表单内容 */}
    </FormContext>
  );
};

如果你的表单字段是用Controller封装的受控组件，只需要保证对应字段的name属性为myFieldName即可，无需额外调整。

内容的提问来源于stack exchange，提问作者k-wasilewski