React-Hook-Form登录表单：登录/密码错误创建后消失问题求助

问题原因 #

你的表单配置了mode: "onBlur"，该模式下仅当字段失去焦点（被触摸）后才会展示校验错误。同时在提交后调用reset时，仅设置了keepErrors: true，但未保留字段的touched（已触摸）状态，导致：

• login字段若从未被点击过（未触发onBlur），提交时生成的校验错误会因touched状态被重置而无法显示；
• password字段若之前被触摸过，提交后首次渲染会显示错误，但reset重置touched状态后，二次渲染时错误消失；
• 其他字段（如captcha）看似正常，多为测试时触摸过字段或渲染时机差异导致，本质问题一致。

解决方案 #

根据你的业务需求，可选择以下任意一种方案：

1. 重置时保留触摸状态 #

修改reset的配置参数，同时保留错误与触摸状态：

const onSubmit = async (data) => {
  reset({
    login: "",
    password: "",
    rememberMe: false,
    captcha: "",
  }, {
    keepErrors: true,
    keepTouched: true, // 保留字段的触摸状态
    keepDirty: true // 可选：保留脏字段状态（字段值与默认值不同的标记）
  });
};

2. 切换校验模式为onSubmit #

若希望提交表单时直接展示所有字段的错误，无需依赖触摸状态，修改useForm的mode配置：

const {
  register, handleSubmit, clearErrors, setError, reset, formState: { errors },
} = useForm({
  mode: "onSubmit", // 改为提交时触发校验
  defaultValues: {
    login: "", password: "", rememberMe: false, captcha: "",
  }
});

该模式下，表单提交时会一次性校验所有字段，错误直接展示，不受触摸状态影响。

3. 仅在成功提交后重置表单 #

若你的登录逻辑是异步请求（如调用后端接口），建议仅在请求成功后重置表单，失败时保留表单值与错误：

const onSubmit = async (data) => {
  try {
    // 示例：调用登录接口
    // await loginApi(data);
    // 成功后重置表单，不保留错误
    reset({
      login: "",
      password: "",
      rememberMe: false,
      captcha: "",
    });
  } catch (err) {
    // 失败时设置服务器错误，不重置表单
    setError("server", { message: err.message });
  }
};

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