模态窗口登录错误提示优化：弹窗内显错误，避免页面跳转

问题核心是表单默认的POST提交会触发页面跳转，导致模态窗口被关闭。改成AJAX异步提交就能在不刷新页面的前提下完成登录验证，同时保留模态窗口并显示错误信息。

1. 后端路由调整 #

把原来的页面渲染逻辑改成返回JSON响应，让前端可以直接处理验证结果：

router.post("/login", async (req, res) => {
  const { username, password } = req.body;

  try {
    const request = new sql.Request();
    const result = await request
      .input("username", sql.VarChar, username)
      .input("password", sql.VarChar, password)
      .query("SELECT * FROM Kullanicilar WHERE kullaniciAdi = @username AND kullaniciSifre = @password");

    if (result.recordset.length > 0) {
      console.log("登录成功");
      res.json({ success: true });
    } else {
      console.log("无效的用户名或密码");
      res.json({ success: false, errorMessage: "您输入的用户名或密码有误。" });
    }
  } catch (err) {
    console.error("登录过程中出错:", err);
    res.status(500).json({ success: false, errorMessage: "登录时发生错误。" });
  }
});

2. 前端代码修改 #

给表单添加ID，用原生JS监听提交事件，阻止默认跳转，通过fetch发送请求并动态显示错误：

<div class="giris gizle">
  <button class="giris-kapat">&times;</button>
  <h1 class="giris-name">登录</h1>
  <div>
    <form id="login-form" action="/login" method="POST">
      <ul class="giris-list">
        <li class="giris-item">
          <p class="giris-text">用户名:</p>
          <input type="text" name="username" required />
        </li>
        <li class="giris-item">
          <p class="giris-text">密码:</p>
          <input type="password" name="password" required />
        </li>
      </ul>
      <!-- 错误信息容器，初始隐藏 -->
      <p id="error-message" style="color: red; margin-top: 10px; display: none;"></p>
      <button type="submit" class="giris-btn">登录</button>
    </form>
  </div>
</div>

<script>
const loginForm = document.getElementById('login-form');
const errorMsgEl = document.getElementById('error-message');

loginForm.addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止表单默认跳转行为

  // 获取表单输入值
  const username = loginForm.username.value;
  const password = loginForm.password.value;

  try {
    const res = await fetch('/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username, password })
    });

    const data = await res.json();

    if (data.success) {
      // 登录成功，跳转到用户页面
      window.location.href = '/user-page';
    } else {
      // 显示错误信息，模态窗口保持打开
      errorMsgEl.textContent = data.errorMessage;
      errorMsgEl.style.display = 'block';
    }
  } catch (err) {
    errorMsgEl.textContent = '登录时发生错误，请稍后重试。';
    errorMsgEl.style.display = 'block';
  }
});
</script>

关键说明 #

• 用e.preventDefault()阻止表单默认的页面跳转，确保模态窗口不会关闭。
• 后端返回JSON格式的验证结果，前端根据success字段判断状态：成功则跳转页面，失败则在模态窗口内显示红色错误文本。
• 错误信息容器初始设为display: none，仅在登录失败时切换为显示状态。

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