使用react hook form + yup开发表单如何实现输入时实时触发校验

1. 核心配置：修改useForm的触发模式 #

React Hook Form 默认的校验触发时机仅为表单提交时，要实现输入时实时校验，只需修改useForm钩子的mode参数即可，你可以根据需求选择合适的触发模式：

• mode: 'onChange'：字段值发生变化时立刻触发校验，完全符合你要的输入时即时校验的需求
• mode: 'onBlur'：字段失焦时才触发校验，输入过程中不弹出错误提示，适合不想打断用户连续输入的场景
• mode: 'all'：同时触发onChange和onBlur两种校验逻辑

修改你的useForm调用代码示例如下：

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
// 引入你定义好的Yup校验规则
import validationSchema from './你的校验规则文件路径';

const 你的表单组件 = () => {
  const { 
    control, 
    handleSubmit, 
    formState: { errors },
    trigger // 后面联动校验会用到
  } = useForm({
    // 绑定Yup校验规则
    resolver: yupResolver(validationSchema),
    // 这里是控制实时校验的核心配置
    mode: 'onChange',
    // 统一声明默认值，原来写在Controller里的defaultValue可以删掉
    defaultValues: {
      email: '',
      confirmation_email: ''
    }
  });

  // 你的其他业务逻辑...
}

如果项目还没安装resolver依赖，执行npm install @hookform/resolvers安装即可。

2. 优化邮箱确认字段的联动校验 #

因为你配置了两次邮箱必须一致的规则，默认情况下修改email字段时，confirmation_email字段不会自动重新校验，需要手动触发校验保证错误提示同步更新，修改你的email字段Controller代码：

<Controller 
  name="email"
  control={control}
  render={({field}) => (
    <Input 
      {...field} 
      name={field.name} 
      placeholder="email"
      onChange={(e) => {
        field.onChange(e); // 先执行默认的字段赋值逻辑
        trigger('confirmation_email'); // 手动触发确认邮箱的重新校验
      }}
    />
  )}
/>
{errors.email && <span>{errors.email.message}</span>}

<!-- 确认邮箱的Controller不需要额外修改，保持原有配置即可 -->
<Controller 
  name="confirmation_email"
  control={control}
  render={({field}) => (
    <Input 
      {...field} 
      name={field.name} 
      placeholder="确认邮箱"
    />
  )}
/>
{errors.confirmation_email && <span>{errors.confirmation_email.message}</span>}

3. 原有提交逻辑无需修改 #

你现有的form标签、提交按钮代码不需要做任何调整，配置完上述内容后，即可实现输入时实时校验、错误提示即时更新的效果。

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