a) 用户登录页面表单接受输入用户名和密码，创建一个含3个合法用户名和密码组合的数组；对表单输入值在本地使用JS对数据验证，若用户名或密码为空，则提示“用户名或密码不能为空！”，否则，使用循环语句验证用户名或密码是否为合法组合之一，如果是，则跳转至商品列表页面，否则，继续留在本页面，并弹出“用户名或密码错误”提示。（含代码

要实现用户登录页面的功能，首先需要创建一个包含合法用户名和密码组合的数组。然后，使用JavaScript对表单输入值进行本地验证，确保用户名和密码不为空，并且是合法的组合之一。以下是实现这一功能的步骤和示例代码：

步骤 1: 创建合法用户名和密码的数组

首先，定义一个数组，包含三个合法的用户名和密码组合。

const validCredentials = [
  { username: "admin", password: "admin123" },
  { username: "user1", password: "password1" },
  { username: "user2", password: "password2" }
];

步骤 2: 创建登录表单

使用HTML创建一个登录表单，包含用户名和密码输入框以及一个提交按钮。

<form id="loginForm">
  <input type="text" id="username" placeholder="Username" required>
  <input type="password" id="password" placeholder="Password" required>
  <button type="submit">登录</button>
</form>
<div id="message"></div>

步骤 3: 使用JavaScript进行表单验证

使用JavaScript添加事件监听器，当表单提交时，进行输入验证。

document.getElementById('loginForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const messageDiv = document.getElementById('message');

  // 检查用户名和密码是否为空
  if (username === '' || password === '') {
    messageDiv.textContent = '用户名或密码不能为空！';
    return;
  }

  // 循环验证用户名和密码是否为合法组合之一
  let isValid = false;
  for (let i = 0; i < validCredentials.length; i++) {
    if (validCredentials[i].username === username && validCredentials[i].password === password) {
      isValid = true;
      break;
    }
  }

  if (isValid) {
    // 如果用户名和密码正确，跳转至商品列表页面
    window.location.href = 'product-list.html'; // 假设商品列表页面的URL
  } else {
    // 如果用户名或密码错误，显示错误提示
    messageDiv.textContent = '用户名或密码错误';
  }
});

注意事项

• 表单中的required属性用于HTML5客户端验证，确保在提交表单前输入框不为空7。
• 表单提交时，使用event.preventDefault()阻止默认的表单提交行为，以便使用JavaScript进行进一步处理。
• 通过循环语句检查输入的用户名和密码是否与数组中的合法组合匹配，从而实现验证逻辑。

以上代码提供了一个基本的用户登录验证流程，可以根据实际需求进行调整和扩展。1248