使用Node.js+SQLite开发登录功能，错误凭证报错提示无法生效求助

我需要实现登录凭证校验失败时给用户展示报错信息的功能，目前调试无法正常运行。技术栈为后端Node.js + SQLite数据库，已经尝试过fetch调用、模块导入导出等相关操作均无效果。
对应的登录页HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="main.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>club</title>
</head>
<body>
    <header></header>
    <div id="ClockDisplay" class="clock" onload="showTime()"></div>
    <div class="background">
        <div class="demo">
            <div class="login">
                <div class="login-text">
                    <span class="glitchanim" data-text=".club"></span>
                </div>
                <div class="login-form">
                    <form action="auth" method="POST" autocomplete="off">
                        <div class="login-row">
                            <svg class="login-icon name svg-icon" viewBox="0 0 20 20">
                                <path d="M0,20 a10,8 0 0,1 20,0z M10,0 a4,4 0 0,1 0,8 a4,4 0 0,1 0,-8" />
                            </svg>
                            <style type="text/css">
                                input[name="username"] {
                                    background: transparent;
                                }
                            </style>
                            <input type="text" name="username" class="login-input name" id="test" placeholder="Username" />
                        </div>
                        <div class="login-row">
                            <svg class="login-icon pass svg-icon" viewBox="0 0 20 20">
                                <path d="M0,20 20,20 20,8 0,8z M10,13 10,16z M4,8 a6,8 0 0,1 12,0" />
                            </svg>
                            <input type="password" name="password" class="login-input pass" placeholder="Password" />
                        </div>
                        <p class="login-error">Username and/or Password do not exist</p>
                        <input type="submit" value="Sign In">
                        <p class="login-signup">Don't have an account? &NonBreakingSpace; <a href="signup.html">Sign up</a></p>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <footer></footer>
    <script src="main.js"></script>
</body>
</html>

你当前使用的是form表单同步提交的逻辑，可选择以下两种方案实现错误提示： #

方案1：同步提交+参数回显（改动最小，适配现有逻辑） #

1. 先在main.css中添加错误提示默认隐藏样式：

.login-error {
  color: #f44336;
  margin: 10px 0;
  display: none;
}

2. 调整后端/auth接口校验失败的返回逻辑，校验不通过时重定向回登录页并携带错误标记：

// Node.js 接口示例
app.post('/auth', (req, res) => {
  const { username, password } = req.body
  // 执行SQLite校验逻辑
  const user = 替换为你的账号密码校验逻辑()
  if (!user) {
    // 校验失败，带回错误参数
    return res.redirect('/login?error=1')
  }
  // 校验成功逻辑，比如设置session后跳转首页
  res.redirect('/home')
})

3. 在main.js中添加页面加载时的参数校验逻辑，读取url参数控制错误提示显示：

window.addEventListener('load', () => {
  const query = new URLSearchParams(window.location.search)
  const errorTip = document.querySelector('.login-error')
  if (query.get('error') === '1') {
    errorTip.style.display = 'block'
  }
})

方案2：异步提交（无页面刷新，用户体验更好） #

1. 修改HTML中的form标签，移除默认的action和method属性，添加id标识：

<form id="loginForm" autocomplete="off">

2. 在main.js中添加表单提交事件监听，阻止默认跳转，用fetch异步提交请求：

document.querySelector('#loginForm').addEventListener('submit', async (e) => {
  e.preventDefault()
  const errorTip = document.querySelector('.login-error')
  errorTip.style.display = 'none'
  // 组装表单数据
  const formData = new FormData(e.target)
  try {
    const res = await fetch('/auth', {
      method: 'POST',
      body: new URLSearchParams(formData),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
    if (res.ok) {
      // 登录成功跳转
      window.location.href = '/home'
    } else {
      // 校验失败显示错误
      errorTip.style.display = 'block'
    }
  } catch (err) {
    console.error('登录请求异常', err)
  }
})

3. 调整后端/auth接口返回逻辑，校验失败返回401状态码：

app.post('/auth', (req, res) => {
  const { username, password } = req.body
  const user = 替换为你的账号密码校验逻辑()
  if (!user) {
    return res.sendStatus(401)
  }
  // 登录成功处理，比如设置session
  res.sendStatus(200)
})

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