React Hook Form（onBlur模式）结合Yup实现提交按钮验证前禁用

当然可以实现，核心是利用React Hook Form内置的formState状态来控制提交按钮的禁用状态，以下是具体实现方案：

核心逻辑 #

React Hook Form的formState对象提供了两个关键状态：

• isValid：当所有字段都通过Yup校验规则时，该值为true
• isDirty：当表单中有任意字段被修改过（偏离默认值）时，该值为true

结合这两个状态，就能精准控制提交按钮的禁用：只有当表单被修改过且所有校验规则都通过时，按钮才可用。

具体实现步骤 #

1. 确保依赖配置正确 #

先确认已经安装了所需依赖：

npm install react-hook-form @hookform/resolvers yup

2. 组件完整代码示例 #

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

// 定义Yup校验规则
const formSchema = yup.object().shape({
  username: yup.string()
    .required('用户名不能为空')
    .matches(/^[a-zA-Z0-9_]{3,16}$/, '用户名需为3-16位字母、数字或下划线'),
  email: yup.string()
    .required('邮箱不能为空')
    .email('请输入有效的邮箱格式'),
});

export default function UserForm() {
  const { 
    register, 
    handleSubmit, 
    formState: { errors, isValid, isDirty } 
  } = useForm({
    resolver: yupResolver(formSchema),
    mode: 'onBlur', // 启用onBlur校验模式
    defaultValues: {
      username: '',
      email: '',
    },
  });

  const handleFormSubmit = (formData) => {
    // 处理表单提交逻辑，比如发送API请求
    console.log('提交的数据:', formData);
  };

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)}>
      <div className="form-group">
        <label>用户名</label>
        <input 
          type="text" 
          {...register('username')}
          placeholder="请输入用户名"
        />
        {errors.username && <span className="error">{errors.username.message}</span>}
      </div>

      <div className="form-group">
        <label>邮箱</label>
        <input 
          type="email" 
          {...register('email')}
          placeholder="请输入邮箱"
        />
        {errors.email && <span className="error">{errors.email.message}</span>}
      </div>

      {/* 根据状态控制按钮禁用 */}
      <button 
        type="submit" 
        disabled={!isValid || !isDirty}
      >
        提交表单
      </button>
    </form>
  );
}

细节说明 #

• 因为是onBlur模式，只有当用户点击离开输入字段时，该字段的校验才会触发，isValid会实时更新为当前校验结果
• 加入isDirty是为了避免初始状态下（所有字段都是默认空值），按钮误触发提交（此时isValid会因为必填项未填写而为false，但如果默认值恰好符合校验规则，isDirty就能防止无效提交）
• 如果你的业务场景不需要考虑初始状态的误提交，也可以简化为disabled={!isValid}

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