密码模糊事件未显示

Password blur event not showing

本文关键字：显示事件模糊密码更新时间：2023-09-26

我试图有一个模糊事件，因为当用户名和密码要短时，它说用户名/密码必须是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);

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

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 = ' ';
    }       
  }

      </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);