2016-05-01 64 views
-2

我試圖有一個模糊事件,當用戶名和密碼是簡短的說,用戶名/密碼必須是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); 
+0

語法錯誤,打開控制檯並先修復它們 –

+0

對我來說工作得很好嗎? –

+0

doucment,document.getElementId –

回答

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

創建一個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 = ' '; 
    }  
    }