为何我的边框盒的颜色无法更改？

Question

我需要为随机用户创建登录表单，当密码不正确时，密码框需要变成红色（border-color），当密码正确时，需要变成绿色。你能帮我用Javascript代码吗？如果我有任何错误，请原谅我的英语。谢谢。

我尝试了这个，但颜色没有改变。

var users = [{
  username: 'new_user',
  password: "123456789",
}]


function login(email, password) {
  var email = document.getElementById("email").value
  var password = document.getElementById("password").value

  for (var user of users) {

    if ((email === user.email || email === user.username) && password === user.password) {
      var block = document.querySelector('.nav');
      block.style.display = "block"
      var errMsg = document.querySelector('.loginForm .errorMessage')
      errMsg.style.display = "none"
      var form = document.querySelector('.loginForm')
      form.style.display = "none"
      var name = document.getElementById("user-name")
      name.innerHTML = user.name;
      loggedUser = user;
      clearValue("email");
      clearValue("password")
    } else {
      var errMsg = document.querySelector('.loginForm .errorMessage')
      errMsg.style.display = "block"
      var passwordBox = document.querySelector(".loginForm input.password")
      passwordBox.style.border.color = "red"
    }
  }
}

<div id="loginForm" class="loginForm">
  <h1>登录</h1>
  <input id="email" type="text" class="email" placeholder="电子邮件或用户名">
  <input onkeyup="loginOnEnter(event)" id="password" type="password" class="password" placeholder="密码">
  <p class="errorMessage">*请输入有效密码</p>
  <button onclick="login()" class="login-btn">登录</button>
</div>

Answer 1

可能是你的CSS。尝试一下：

style.borderColor = 'red';