redux-form Fields何时被标记为touched？表单异常问题咨询

首先，结合你提到的touchOnBlur、touchOnChange和meta.touched这些特性，我默认你用的是React Hook Form这类主流表单库，下面咱们来拆解触发字段touched变为true的具体条件，以及你遇到的场景问题可能的原因：

核心触发条件 #

以下是表单库中让字段被标记为touched的几种常见情况：

• 调用handleSubmit时的默认行为：这也是你基础流程里点击登录按钮所有字段被标记为touched的原因——handleSubmit内部会自动调用表单库的touch()方法，一次性触达所有字段。
• 手动调用触达方法：
  • 调用全局的touch()方法（不带参数），会把所有字段标记为touched；
  • 调用touch(fieldName)可以单独触达某个特定字段；
  • 调用setValue(fieldName, value, { touch: true })时，也会同时把该字段标记为touched。
• 启用自动触达配置：当touchOnBlur设为true时，字段失去焦点会触发touched；touchOnChange设为true时，字段值发生变化会触发touched——不过你已经把这两个都设为false，所以这两种情况可以排除。

你遇到的复杂流程问题分析 #

打开并关闭忘记密码模态框后，点击登录不再标记字段为touched，大概率是模态框的操作破坏了表单的上下文状态：

• 可能是模态框的渲染逻辑导致表单组件被卸载后重新挂载，这会重置表单的所有内部状态（包括touched相关的标记）；
• 也可能是模态框的代码里意外调用了reset()方法，而reset()默认会把touched状态一并重置为false；
• 还有一种可能是模态框使用了和登录表单相同的表单上下文，导致状态互相干扰。

快速修复方案 #

为了避免这种场景下的问题，你可以在handleSubmit的回调里手动强制触达所有字段，确保无论之前的状态如何，点击登录都会把所有字段标记为touched：

import { useForm } from "react-hook-form";

function LoginForm() {
  const { register, handleSubmit, touch, formState: { errors } } = useForm({
    touchOnBlur: false,
    touchOnChange: false,
  });

  const onSubmit = (data) => {
    // 先强制触达所有字段
    touch();
    // 这里可以先检查errors，再处理提交逻辑
    if (Object.keys(errors).length === 0) {
      console.log("提交数据:", data);
      // 执行登录请求
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username", { required: "用户名不能为空" })} />
      {errors.username && <p>{errors.username.message}</p>}
      
      <input {...register("password", { required: "密码不能为空" })} type="password" />
      {errors.password && <p>{errors.password.message}</p>}
      
      <button type="submit">登录</button>
      {/* 忘记密码模态框按钮和组件 */}
    </form>
  );
}

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