javascript const usernameInput = document.getElementById("username-input"); const passwordInput = document.getElementById("password-input"); const confirmPasswordInput = document.getElementById("confirm-password-input"); function validate() { // 验证用户名 const username = usernameInput.value.trim(); const usernameRules = [ username.length >= 6 && username.length <= 8, /^[A-Z]/.test(username), /^[a-zA-Z]+$/.test(username) ]; if (!usernameRules.every(rule => rule)) { alert("用户名格式不正确，请重新输入"); return false; } // 验证密码 const password = passwordInput.value.trim(); const passwordRules = [ password.length >= 6 && password.length <= 12, /^\w+$/.test(password) ]; if (!passwordRules.every(rule => rule)) { alert("密码格式不正确，请重新输入"); return false; } // 验证确认密码 const confirmPassword = confirmPasswordInput.value.trim(); if (confirmPassword !== password) { alert("确认密码不一致，请重新输入"); return false; } // 验证通过，可以进行登录 console.log("用户名：", username); console.log("密码：", password); alert("登录成功！"); return true; } // 监听登录按钮的点击事件 const loginButton = document.getElementById("login-button"); loginButton.addEventListener("click", function() { if (validate()) { alert("登录成功！"); } else { alert("对不起，您的用户名或密码错误"); } }); 在这段代码中，我们在 validate() 函数中添加了控制台输出用户名和密码的代码，以便开发者进行调试。在点击登录按钮后，如果验证通过，则会弹出登录成功的提示框；如果验证不通过，则会弹出登录失败的提示框。将用户名和密码显示在页面上且改为用数组判断，且简化一点

以下是修改后的代码：

const usernameInput = document.getElementById("username-input");
const passwordInput = document.getElementById("password-input");
const confirmPasswordInput = document.getElementById("confirm-password-input");

function validate() {
  // 验证用户名
  const username = usernameInput.value.trim();
  const usernameRules = [
    username.length >= 6 && username.length <= 8,
    /^[A-Za-z]+$/.test(username)
  ];
  if (!usernameRules.every(rule => rule)) {
    alert("用户名格式不正确，请重新输入");
    return false;
  }

  // 验证密码
  const password = passwordInput.value.trim();
  const passwordRules = [
    password.length >= 6 && password.length <= 12,
    /^\w+$/.test(password)
  ];
  if (!passwordRules.every(rule => rule)) {
    alert("密码格式不正确，请重新输入");
    return false;
  }

  // 验证确认密码
  const confirmPassword = confirmPasswordInput.value.trim();
  if (confirmPassword !== password) {
    alert("确认密码不一致，请重新输入");
    return false;
  }

  // 验证通过，可以进行登录
  const userInfo = [username, password];
  document.getElementById("user-info").textContent = userInfo;
  alert("登录成功！");
  return true;
}

// 监听登录按钮的点击事件
const loginButton = document.getElementById("login-button");
loginButton.addEventListener("click", function() {
  if (validate()) {
    alert("登录成功！");
  } else {
    alert("对不起，您的用户名或密码错误");
  }
});

修改后的代码中，我们通过将用户名和密码存储在一个数组中，再将其显示在页面的 `user-info` 元素中，来实现将用户名和密码显示在页面上的功能。同时，我们简化了正则表达式的写法，并将其放在数组中进行判断，使代码更加简洁。