Question

我的HTML：

<html>
   <head>
       <title>Js</title>
       <link href="js1.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
       <div id="box">
          <form action="action.php">
             <label>Enter Name
                  <input id="Username" type="text" name="Enter Username" />
             </label>
             <div id="feedback"></div>
             <label id="pass">Password
                  <input id="pass" type="password" name="Enter Passkey" />
              </label>
                 <input type="submit" value="sign up" />
          </form>
       </div>
       <script src="js1.js"></script>
       </body>
</html>

我的JavaScript：

function checkUsername() { // Declare function
   var elMsg = document.getElementById('feedback'); // Get feedback element
   if (this.value.length < 5) { // If username too short
   elMsg.textContent = 'Username must be 5 characters or more'; // Set msg
    } else { // Otherwise
    elMsg.textContent = ''; // Clear message
   }
 }

  var elUsername = document.getElementById('Username'); // Get-name input
  elUsername.onBlur = checkUsername; //  loses focus call checkuserName()

我的CSS：

body{
   background-color:black;
  }
#box{
background-color:silver;

height:600px;
width:600px;
margin-left:300px;
}

p{
color:white;
font-size:18;
}
form{
padding:20px;
width:96px;
}
input[type="text"] , input[type="password"]
{
background-color:#999;
border:2px solid white;

}
input[type="text"]:focus , input[type="password"]:focus
{
background-color:#fff
}

该计划应该做什么：

一旦用户输入UserName，该函数必须检查它是否至少有5个字符，否则显示一个msg代替＆＃34;反馈＆＃34;？

我错过了什么？

Answer 1

你在这一行有一个错字 var elUsername = document.getElementById('username')

输入的id为大写Username

尝试：

var elUsername = document.getElementById('Username')

onBlur中另一个更重要的拼写错误elUsername.onBlur = checkUsername事件应为onblur全部小写。

这是一个有效的Example

JavaScript表单验证不起作用 - 检查条目上的字符数

1 个答案: