如何为已有HTML/CSS的登录页面添加JavaScript验证跳转功能？

需求说明 #

已完成登录页面的HTML与CSS编写，需实现以下功能：

• 点击登录按钮时检查输入框内容
• 当用户名等于damon、密码等于password时，跳转至chat.html
• 验证不通过时弹出alert("wrong")

步骤1：修改HTML代码 #

给用户名输入框添加唯一标识id，并为按钮绑定点击触发的函数：

<html>
  <head>
    <title>Login</title>
    <link rel="stylesheet" href="style/main.css">
  </head>
  <body>
    <div id="content">
      <div class="login">
        <h1>Login</h1>
        <!-- 为用户名输入框添加id，方便JS获取内容 -->
        <input placeholder="username" type="text" id="username">
        <input placeholder="password" type="password" id="password">
        <!-- 绑定点击事件到自定义函数 -->
        <button type="button" onclick="clickHandler()" id="enter">ENTER</button>
      </div>
    </div>
  </body>
  <script src="script/db.js"></script>
  <script src="script/main.js"></script>
</html>

步骤2：修改main.js代码 #

完善函数逻辑，获取输入框内容并执行验证：

function clickHandler() {
  // 获取用户名、密码输入框的实际输入值
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  
  // 验证逻辑：匹配成功则跳转，失败则弹出提示
  if (username === 'damon' && password === 'password'){
    window.location.replace("chat.html");
  } else {
    alert("wrong");
  }
}

关键说明 #

• 通过document.getElementById('xxx').value可以获取对应输入框的用户输入内容
• 修正了原代码中密码判断的错误值（原代码写为poop，已改为需求要求的password）
• 按钮通过onclick="clickHandler()"绑定事件，点击时自动触发验证逻辑

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