验证未通过时登录表单仍提交，handleLogin函数未执行求助

问题描述 #

我的handleLogin函数似乎未被执行，我在代码中添加了多个console.log和alert语句测试，但控制台无日志输出，弹窗也未弹出。

尽管如此，API函数仍会被调用。当我未通过验证检查就按下回车键时，<form>会提交，浏览器抛出“API request failure”错误：

相关代码 #

登录页面组件 #

function LoginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loginButton, setLoginButton] = useState(true);
  const [emailError, setEmailError] = useState(false);
  const [passwordError, setPasswordError] = useState(false);

  const router = useRouter();


  useEffect(() => {
    if (email.length > 0 && password.length > 0) {
      setLoginButton(false);
    } else {
      setLoginButton(true);
    }

    if (email.length > 0) setEmailError(false);
    if (password.length > 0) setPasswordError(false);
  }, [email, password]);

  function isValidEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }

  const validateInputs = () => {
    let isValid = true;

    if (!isValidEmail(email)) {
      setEmailError(true);
      isValid = false;
    }

    if (password.length < 8) {
      setPasswordError(true);
      isValid = false;
    }

    return isValid;
  };

  const handleLogin = async (e) => {
    console.log("✅ activate handleLogin");
    e.preventDefault();

    alert("✅ activate handleLogin");
    console.log("✅ activate handleLogin");

    const isValid = validateInputs();
    if (!isValid) {
      console.log("⛔ validation failure");
      return;
    }

    try {
      console.log("🔄 please be login!!");
      await postSignIn({ email, password });
      router.push("/items");
    } catch (err) {
      console.error("❌ login failure: ", err);
    }
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen gap-[24px] md:gap-[30px]">
      <Link href="/">
        <img
          src="/assets/pc_logo.png"
          alt="logo"
          className="w-[198px] md:w-[396px]"
        />
      </Link>

      {/* Form */}
      <form
        name="login"
        onSubmit={(e) => {
          e.preventDefault();
          handleLogin(e);
        }}
      >
        {/* email */}
        <InputForm
          id="email"
          label="email"
          type="email"
          name="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="input email"
          isPassword={false}
          errorMessage={emailError ? "(foreign language text)" : null}
        />

        {/* password */}
        <InputForm
          id="password"
          label="password"
          type="password"
          name="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="(text)"
          isPassword={true}
          errorMessage={
            passwordError ? "(foreign language text)" : null
          }
        />

        {/* login */}
        <Button
          size="form"
          rounded={true}
          disabled={loginButton}
          className="mb-[30px]"
        >
          login
        </Button>
        <SocialLogin />
      </form>

      {/* page moving */}
      <section className="flex gap-1 text-[14px] font-[500]">
        <p className="text-gray-800 ">(foreign language text)</p>
        <Link
          href="/signup"
          className="cursor-pointer text-primary-100 underline"
        >
          signup
        </Link>
      </section>
    </div>
  );
}

API请求文件 #

export default async function apiRequest(endpoint, options = {}) {
  const url = `${BASE_URL}${endpoint}`;

  const defaultOptions = {
    headers: {
      "Content-Type": "application/json",
    },
    ...options,
  };

  const response = await fetch(url, defaultOptions);
  if (!response.ok) throw new Error("API request failure");

  return response.json();
}

//
export async function postSignIn({ email, password }) {
  return apiRequest("/Auth/SignIn", {
    method: "POST",
    body: JSON.stringify({ email, password }),
  });
}

问题根源与修复方案 #

核心问题 #

登录按钮<Button>未设置type="submit"属性，导致点击按钮时无法触发表单的onSubmit事件；同时按下回车时，表单会触发默认提交行为，绕过handleLogin直接发送请求，从而出现API错误。

修复步骤 #

1. 给Button组件添加type="submit"属性
   明确指定按钮为提交类型，点击时触发表单的onSubmit逻辑：

   <Button
     size="form"
     rounded={true}
     disabled={loginButton}
     className="mb-[30px]"
     type="submit" // 新增该行
   >
     login
   </Button>
   

2. 简化表单提交逻辑（可选）
   由于handleLogin已包含e.preventDefault()，可以直接将其绑定到onSubmit：

   <form
     name="login"
     onSubmit={handleLogin}
   >
   

3. 拦截禁用状态下的回车提交（可选）
   避免按钮禁用时回车触发无效提交：

   <form
     name="login"
     onSubmit={(e) => {
       if (loginButton) {
         e.preventDefault();
         return;
       }
       handleLogin(e);
     }}
   >
   

验证效果 #

修改完成后，点击登录按钮或按下回车，都会触发handleLogin函数，执行输入验证逻辑，只有通过验证才会调用API，控制台也会输出对应的日志信息。

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