JavaScript密码长度验证逻辑异常求助：输入过长触发错误警告

我编写了如下密码长度验证逻辑：

if (input.length < 8) { 
    alert("Your password should have more than 8 characters")
} else {
    return
}

但点击提交按钮时，即使输入内容长度超过8字符，仍会弹出上述警告，相关完整代码如下：

HTML代码 #

<!DOCTYPE html>

<head>
    <title>Youssef's Website</title>
    <script src="3.js"></script>
    <link rel="stylesheet" href="2.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
    <i class="fa-solid fa-envelope"></i>
    <div class="form-box">
        <h2 style="color: rgb(255, 255, 255); left: 37%; position: relative;">Login Here</h2>
        <div class="password-box">
            <img class="key" src="2.png">
            <input id="input" style="position: relative;" type="password" placeholder="Type your password" maxlength="8" required>
            <img id="noeye" src="noeye.png" hidden onclick="hide()">
            <img id="eye" src="eye.png" onclick="show()">
        </div>
        <div class="submit">
            <button onclick="error()" id="submit" type="button">Submit </button>
        </div>
        <div class="email-box">
            <img class="envelope" src="1.png">
            <input style="position: relative;" type="email" placeholder="Type your email">
        </div>
    </div>
</body>
</html>

CSS代码 #

body {
   background-image: url(https://worldstrides.com/wp-content/uploads/2015/07/iStock_000040849990_Large.jpg);
    background-size: fill;
}
.form-box {
    position: relative;
    border: 25%;
    top: 250px;
    left: 35%;
    height: 250px;
    width: 25%;
    background-color: black;
}
.email-box {
    position: relative;
    left: 10%;
    top: 2%;
}
.password-box {
    position: relative;
    left: 10%;
    top: 27%;
}
.email-box input{
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    border-bottom:2px solid grey;
    width: 59%;
}
.password-box input{
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    border-bottom:2px solid grey;
    width: 59%;
}
.envelope{
    position: relative;
    width: 20px;
}
.key{
    position: relative;
    width: 20px;
}
#noeye{
    position: relative;
    width: 20px;
}
#eye{
    position: relative;
    width: 20px;
}
#submit {
    position: absolute;
    left: 10%;
    top: 70%;
    width: 65%;
    color: grey;
}
.submit button {
    background: transparent;
    color: #fff;
    border:2px solid grey;
}

JavaScript代码 #

/*function show(){
   //alert("hi")
  var input = document.getElementById("input")
  var noeye = document.getElementById("noeye")
  var eye = document.getElementById("eye")
  if(input.type == "password" ){
   input.type = "text"
   noeye.hidden = null
   eye.hidden = true
  }
  else {
   input.type = "password"
  }
}
function hide(){
  var input = document.getElementById("input")
  var noeye = document.getElementById("noeye")
  var eye = document.getElementById("eye")
  if(input.type == "text" ){
   input.type = "password"
   noeye.hidden = true
   eye.hidden = null
}
  else {
   input.type = "text"
  }
}*/
function error(){
   var btn = document.getElementById("submit")
   var input = document.getElementById("input")
   if(input.length < 8){
     alert("Your password should have more than 8 characters")
   }
   else{
      return
   }
}

问题根源与修复方案 #

问题出在error函数中：直接使用input.length是错误的，因为input是DOM元素对象，本身没有length属性。需要获取输入框的内容长度，应该使用input.value.length。

修正后的error函数代码：

function error(){
   var input = document.getElementById("input")
   if(input.value.length < 8){
     alert("Your password should have more than 8 characters")
   }
   else{
      return
   }
}

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