为何密码输入框border-color不生效？求JS实现登录密码校验边框变色

原代码核心问题 #

1. DOM样式语法错误：passwordBox.style.border.color写法不符合JS DOM样式规则，正确写法应为borderColor（驼峰命名）或直接设置完整border属性。
2. 登录逻辑漏洞：遍历用户列表时，只要遇到一个不匹配的用户就触发错误样式，但实际需所有用户匹配失败才判定登录失败，否则会出现“存在正确用户却仍提示错误”的问题。
3. 用户属性缺失：定义的users数组仅包含username和password，但代码中引用了user.email和user.name，导致判断条件失效、用户名显示异常。
4. 未实现成功状态样式：需求要求正确密码时边框变绿，原代码未处理该逻辑。

修复后的完整代码 #

HTML 部分 #

<div id="loginForm" class="loginForm">
  <h1>Login</h1>
  <input id="email" type="text" class="email" placeholder="Email or Username">
  <input onkeyup="loginOnEnter(event)" id="password" type="password" class="password" placeholder="Password">
  <p class="errorMessage" style="display: none;">*请输入有效的账号密码</p>
  <button onclick="login()" class="login-btn">登录</button>
</div>
<div class="nav" style="display: none;">
  <span>当前用户：<span id="user-name"></span></span>
</div>

JavaScript 部分 #

var users = [{
  username: 'new_user',
  email: 'new_user@example.com',
  password: "123456789",
  name: '普通用户'
}]

var loggedUser = null;

function clearValue(id) {
  document.getElementById(id).value = '';
}

function loginOnEnter(event) {
  if (event.key === 'Enter') {
    login();
  }
}

function login() {
  var emailInput = document.getElementById("email");
  var passwordInput = document.getElementById("password");
  var emailVal = emailInput.value.trim();
  var passwordVal = passwordInput.value.trim();
  var errMsg = document.querySelector('.loginForm .errorMessage');
  var navBlock = document.querySelector('.nav');
  var loginForm = document.querySelector('.loginForm');
  var userNameEl = document.getElementById("user-name");
  
  // 重置上一次的状态样式
  passwordInput.style.borderColor = '';
  errMsg.style.display = "none";
  
  let loginSuccess = false;
  for (var user of users) {
    if ((emailVal === user.username || emailVal === user.email) && passwordVal === user.password) {
      loginSuccess = true;
      loggedUser = user;
      // 正确登录时设置绿色边框
      passwordInput.style.borderColor = 'green';
      // 切换显示状态
      navBlock.style.display = "block";
      loginForm.style.display = "none";
      userNameEl.innerHTML = user.name;
      // 清空输入框
      clearValue("email");
      clearValue("password");
      break; // 找到匹配用户后终止遍历
    }
  }
  
  // 所有用户均不匹配时触发错误状态
  if (!loginSuccess) {
    errMsg.style.display = "block";
    passwordInput.style.borderColor = 'red';
  }
}

关键修复说明 #

• 样式语法修正：使用borderColor替代错误的border.color，确保边框颜色能正确修改。
• 逻辑优化：先遍历所有用户确认是否存在匹配项，再统一处理成功/失败状态，避免中途误触发错误提示。
• 属性补全：给用户对象补充email和name属性，保证代码中属性引用有效。
• 状态重置：每次登录前重置密码框边框和错误提示，避免残留上一次的状态。
• 需求覆盖：成功登录时给密码框设置绿色边框，完全匹配需求。

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