Javascript表單驗證不成功

在簡單的HTML表單上練習我的Javascript。在一個框中輸入密碼，再次輸入確認。密碼應該包含6個字符（包括1個數字），並且沒有空格。如果密碼符合條件並匹配，則應彈出警告消息。Javascript表單驗證不成功

我主要在那裏，如果條件不符合，彈出錯誤消息，但我無法提醒「成功！」。我用if語句玩弄了很多方法，我不確定我錯過了什麼。有什麼建議麼？

的Javascript：

window.onload = function() {     

      document.getElementById('submit').addEventListener('click', validateInput); 
     } 

     var userPass = document.getElementById('password').value; 
     var confirmPass = document.getElementById('confirm_password').value; 

     function validatePassword() { 
      var userPass = document.getElementById('password').value; 

      if (userPass.length == 0) { // Nothing was entered 
       document.getElementById('password_error').innerHTML = 'Please enter a password'; 
      } else if (userPass.length < 6) { // Less than 6 chars 
       document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length'; 
      } else if (userPass.match(/\s/)) { // contains a space 
       document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces'; 
      } else if (!userPass.match(/\d/)) { // Does not contain a number 
       document.getElementById('password_error').innerHTML = 'Your password must contain a number'; 
      } else if (userPass !== confirmPass) { 
       document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';    
      } else { 
       document.getElementById('password_error').innerHTML = ""; 
       document.getElementById('confirm_error').innerHTML = ""; 
       alert("Success!"); 
       clearFields(); 
      } 
     } 

     function validateConfirm() { 

      function clearFields(){ 
       document.getElementById('password').value=null; 
       document.getElementById('confirm_password').value=null; 
      } 

      if (confirmPass.length == 0) { 
       document.getElementById('confirm_error').innerHTML = "Please confirm password to proceed"; 
      } else if (confirmPass.length < 6) { 
       document.getElementById('confirm_error').innerHTML = "Your password must be at least 6 characters in length"; 
      } else if (userPass !== confirmPass) { 
       document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';  
      } else { 
       document.getElementById('password_error').innerHTML = ""; 
       document.getElementById('confirm_error').innerHTML = ""; 
       alert("Success!"); 
       clearFields(); 
      }    
     } 


     function validateInput() { 
      validatePassword(); 
      validateConfirm(); 
     }

形式：

<form> 
    <fieldset> 
     <legend>CONFIRM PASSWORD</legend> 
     <label for="name">Password: </label> 
     <input type="text" id="password" size="10" /> 
     <p id="password_error" class="error"></p> 
     <label for="name">Confirm Password: </label> 
     <input type="text" id="confirm_password" size="10" /> 
     <p id="confirm_error" class="error"></p> 
     <button id="submit">Submit</button> 
    </fieldset> 
    </form>

來源

2016-07-29 John M.

有validatePassword'的'範圍內沒有clearFields，所以這應該是一個問題 –

有多種問題

裏面只有validateConfirm
您正在閱讀的價值功能clearFields()可用confi rm在頁面加載時只輸入一次，您需要在validate方法內讀取新值，否則它將始終爲空字符串
由於您在密碼字段中驗證策略，因此無需再次檢查確認現場，因爲要檢查的確認和密碼字段是否相同

window.onload = function() { 
 
    document.getElementById('submit').addEventListener('click', validateInput); 
 
} 
 

 

 
function validatePassword() { 
 
    var userPass = document.getElementById('password').value; 
 
    var confirmPass = document.getElementById('confirm_password').value; 
 

 
    if (userPass.length == 0) { // Nothing was entered 
 
    document.getElementById('password_error').innerHTML = 'Please enter a password'; 
 
    } else if (userPass.length < 6) { // Less than 6 chars 
 
    document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length'; 
 
    } else if (userPass.match(/\s/)) { // contains a space 
 
    document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces'; 
 
    } else if (!userPass.match(/\d/)) { // Does not contain a number 
 
    document.getElementById('password_error').innerHTML = 'Your password must contain a number'; 
 
    } else if (userPass !== confirmPass) { 
 
    document.getElementById('password_error').innerHTML = ""; 
 
    document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.'; 
 
    } else { 
 
    document.getElementById('password_error').innerHTML = ""; 
 
    document.getElementById('confirm_error').innerHTML = ""; 
 
    alert("Success!"); 
 
    clearFields(); 
 
    return true; 
 
    } 
 
    return false; 
 
} 
 

 
function clearFields() { 
 
    document.getElementById('password').value = ''; 
 
    document.getElementById('confirm_password').value = ''; 
 
} 
 

 

 
function validateInput() { 
 
    return validatePassword(); 
 
}

<fieldset> 
 
    <legend>CONFIRM PASSWORD</legend> 
 
    <label for="name">Password:</label> 
 
    <input type="text" id="password" size="10" /> 
 
    <p id="password_error" class="error"></p> 
 
    <label for="name">Confirm Password:</label> 
 
    <input type="text" id="confirm_password" size="10" /> 
 
    <p id="confirm_error" class="error"></p> 
 
    <button id="submit">Submit</button> 
 
</fieldset>

來源

2016-07-29 04:14:13

謝謝，這是合理的，並有助於獲得「成功」消息提醒。但是，這也會打破錯誤消息...如果它們不匹配或不符合標準，則錯誤消息顯示短暫的一秒消失。我可能能夠趕上這個雖然... –

'return validatePassword（）;' - 看到更新 –

我發現了兩個故障代碼

在function validatePassword（）之外設置clearFields（）函數;
VAR confirmPass內部功能輸入或通過從調用函數

window.onload = function() { 
 

 
    document.getElementById('submit').addEventListener('click', validateInput); 
 
} 
 

 
function validatePassword() { 
 
    var userPass = document.getElementById('password').value; 
 
    var confirmPass = document.getElementById('confirm_password').value; 
 
    if (userPass.length == 0) { // Nothing was entered 
 
     document.getElementById('password_error').innerHTML = 'Please enter a password'; 
 
    } else if (userPass.length < 6) { // Less than 6 chars 
 
     document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length'; 
 
    } else if (userPass.match(/\s/)) { // contains a space 
 
     document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces'; 
 
    } else if (!userPass.match(/\d/)) { // Does not contain a number 
 
     document.getElementById('password_error').innerHTML = 'Your password must contain a number'; 
 
    } else if (userPass !== confirmPass) { 
 
     document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.'; 
 
    } else { 
 
     document.getElementById('password_error').innerHTML = ""; 
 
     document.getElementById('confirm_error').innerHTML = ""; 
 
     alert("Success!"); 
 
     clearFields(); 
 
    } 
 
} 
 
function clearFields() { 
 
    document.getElementById('password').value = null; 
 
    document.getElementById('confirm_password').value = null; 
 
} 
 
function validateConfirm() { 
 
    var userPass = document.getElementById('password').value; 
 
    var confirmPass = document.getElementById('confirm_password').value; 
 
    if (confirmPass.length == 0) { 
 
     document.getElementById('confirm_error').innerHTML = "Please confirm password to proceed"; 
 
    } else if (confirmPass.length < 6) { 
 
     document.getElementById('confirm_error').innerHTML = "Your password must be at least 6 characters in length"; 
 
    } else if (userPass !== confirmPass) { 
 
     document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.'; 
 
    } else { 
 
     document.getElementById('password_error').innerHTML = ""; 
 
     document.getElementById('confirm_error').innerHTML = ""; 
 
     alert("Success!"); 
 
     clearFields(); 
 
    } 
 
} 
 

 
function validateInput() { 
 
    validatePassword(); 
 
    validateConfirm(); 
 
}

<form> 
 
    <fieldset> 
 
     <legend>CONFIRM PASSWORD</legend> 
 
     <label for="name">Password: </label> 
 
     <input type="text" id="password" size="10" /> 
 
     <p id="password_error" class="error"></p> 
 
     <label for="name">Confirm Password: </label> 
 
     <input type="text" id="confirm_password" size="10" /> 
 
     <p id="confirm_error" class="error"></p> 
 
     <button id="submit">Submit</button> 
 
    </fieldset> 
 
    </form>

來源

2016-07-29 04:25:24

Javascript表單驗證不成功

回答

相關問題