React Hook Form验证失效：提交不拦截且无错误提示

你的代码逻辑框架没问题，但提交时校验未生效，可能由以下几个原因导致，按步骤排查：

1. 依赖版本不兼容 #

React Hook Form、Yup和@hookform/resolvers三者版本必须匹配，否则校验解析器可能无法正常工作。执行以下命令更新到最新兼容版本：

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

2. 错误提示未渲染，无法确认校验状态 #

目前只有name字段显示了错误信息，其他字段的校验结果无法直观看到。给所有字段添加错误提示，确认校验规则是否真的在运行：

// 用户名字段
<div className="Inpults">
  <input type="text" id="username" {...register("userName")} />
  <label htmlFor="username">Nome de usuário</label>
  <span>{errors.userName?.message}</span>
</div>

// 邮箱字段
<div className="Inpults">
  <input type="email" id="Email" {...register("email")} />
  <label htmlFor="Email">Email</label>
  <span>{errors.email?.message}</span>
</div>

// 其余字段以此类推，添加对应的`errors.xxx?.message`

3. 验证handleSubmit的执行逻辑 #

修改test函数，确认校验不通过时是否会被拦截：

const test = (data) => {
  console.log("表单提交成功，数据:", data);
}

如果校验不通过，这个函数不应该执行。如果依然执行，说明解析器没有正确绑定到useForm实例。

4. 完善Yup Schema细节 #

你的passwordConfirmation字段的required()方法没有添加错误提示，补充后能更清晰地反馈问题：

passwordConfirmation: yup
  .string()
  .oneOf([yup.ref("password")], "As senhas não correspondem verifique")
  .required("Por favor confirme sua senha"),

同时检查密码的正则表达式是否有语法错误，确保匹配规则符合预期。

5. 显式指定表单校验模式 #

虽然默认是提交时校验，但显式设置可以避免潜在的配置问题：

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<IRegisterData>({
  resolver: yupResolver(schema),
  mode: "onSubmit", // 明确指定提交时触发校验
});

6. 排除样式组件干扰 #

暂时将FormStyled替换为原生<form>标签，确认是否是样式组件阻止了表单的默认校验流程。

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