密码模糊事件未显示

Question

我正在尝试为用户名和密码缩短时设置一个模糊事件，它说 username/password 必须是 x 长。出于某种原因，它只适用于我的用户名，我不知道为什么

HTML

  <body>
    <div id="page">
      <h1>List King</h1>
      <h2>New Account</h2>
      <form method="post" action="http://www.example.org/register">

        <label for="username">Create a username: </label>
        <input type="text" id="username" />
        <div id="feedback"></div>

        <label for="password1">Create a password: </label>
        <input type="password" id="password"/>
        <div id="feedback"></div>

        <input type="submit" value="sign up" />

      </form>
    </div>
    <script src="event-listener.js"></script>
  </body>

javascript

function checkUsername() {                             
  var elMsg = document.getElementById('feedback');            
if (this.value.length < 5) {                        
    elMsg.textContent = 'Username must be 5 characters or more'; 
  } else {                                             
elMsg.textContent = '';                            
 } 
 }



var elUsername = document.getElementById('username');  
elUsername.addEventListener('blur', checkUsername, false);


function checkPassword() {
var elMsg = document.getElementId('feedback');
if (this.value.length < 6){
    elMsg.textContent = 'Password must be 6 characters or more';
} else {
    elMsg.textContent = ' ';
}       
}
var elPassword = doucment.getElementById('password');
elPassword.addEventListener('blur', checkPassword, false);

Answer 1

      </head>
      <body>
        <div id="page">
          <h1>List King</h1>
          <h2>New Account</h2>
          <form method="post" action="http://www.example.org/register">

            <label for="username">Create a username: </label>
            <input type="text" id="username" />
            <div id="feedback"></div>

            <label for="password1">Create a password: </label>
            <input type="password" id="password"/>      <div id="feedback1"></div>


            <input type="submit" value="sign up" />

          </form>
        </div>
        <script src="event-listener.js"></script>
      </body>
    </html>


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 msg
  }
}



var elUsername = document.getElementById('username');  // Get username input
// When it loses focus call checkUsername()
elUsername.addEventListener('blur', checkUsername, false);


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

}var elPassword = document.getElementById('password');  // Get username input
elPassword.addEventListener('blur', CheckPassword, false);

Answer 2

在此处创建了一个 plunkr 示例< https://plnkr.co/edit/MBkFQSEjbKIAFPDOFUTW?p=preview >。您的代码中几乎没有拼写错误，并使用相同的 id 来显示消息。我对模糊事件使用了 html5 标签而不是事件侦听器。

function checkUsername() {                             
    var usernameLength=document.getElementById('username').value.length;
    var elMsg = document.getElementById('feedback1');            
    if (usernameLength < 5) {                        
      elMsg.textContent = 'Username must be 5 characters or more'; 
    } else {                                             
      elMsg.textContent = 'good';                            
    } 
   }

  function checkPassword() {
    var elPassword = document.getElementById('password');
    var elMsg = document.getElementById('feedback2');
    if (elPassword.value.length < 6){
      elMsg.textContent = 'Password must be 6 characters or more';
    } else {
      elMsg.textContent = ' ';
    }       
  }

密码模糊事件未显示

Password blur event not showing

html

javascript

blur