Javascript錯誤檢查錯誤。 （表單驗證）

Question

我試圖驗證窗體中的多個字段。在大多數情況下，我的代碼似乎工作，但經過進一步測試，我注意到一些奇怪的行爲。無論出於何種原因，如果最後一個字段正在工作，我的表單似乎會經歷，在這種情況下，所有其他錯誤檢查都會被忽略另外在旁邊注意我的消息似乎沒有更新，錯誤提交後，再次提交不同的錯誤。 任何人都可以請向我解釋爲什麼會發生這種情況？

這裏是我的提交按鈕。

<button type="submit" onclick="return validateRegistrationForm()" > 
    Register 
</button> 

腳本：

function validateRegistrationForm() 
{ 
    return validateUsername(), validatePassword(), validateConfirmPassword(); 
} 

function validateUsername() 
{ 
    var x=document.forms["registration"]["userName"].value;if (x == null || x == "") 
    { 
     document.getElementById("usernameWarnings").innerHTML = "Username is Required!"; 
     return false; 
    } 
    else if (x.length < 6 || x.lenth > 10) 
    { 
     document.getElementById("usernameWarnings").innerHTML = "Must be Between 6 to 10 Characters!"; 
     return false; 
    } 
    else 
    { 
     return true; 
    } 
} 

function validatePassword() 
{ 
    var y=document.forms["registration"]["userPassword"].value; 
    if (y == null || y == "") 
    { 
     document.getElementById("passwordWarnings").innerHTML = "Password is Required!"; 
     return false; 
    } 
    else if (y.length < 6 || y.lenth > 10) 
    { 
     document.getElementById("passwordWarnings").innerHTML = "Must be Between 6 to 10 Characters!"; 
     return false; 
    } 
    else 
    { 
     return true; 
    } 
} 
function validateConfirmPassword() 
{ 
    var y=document.forms["registration"]["userPassword"].value; 
    var k=document.forms["registration"]["cUserPassword"].value; 
    if (k == null || k == "") 
    { 
     document.getElementById("confirmPasswordWarnings").innerHTML = "Confirm Password is Required!"; 
     return false; 
    } 
    else if (y != k) 
    { 
     document.getElementById("confirmPasswordWarnings").innerHTML = "Passwords not the same"; 
     return false; 
    } 
    else 
    { 
     return true; 
    } 
} 

Answer 1

我想你想：

return validateUsername() && validatePassword() && validateConfirmPassword(); 

的&& s爲必要的，以確保所有條件都滿足。

UPDATE

並非所有錯誤信息被顯示出來，因爲JavaScript的「短路」的&&運算符。這意味着如果&&的左側評估爲false，則右側將不會運行（因爲此時操作的輸出保證爲false）。這裏是你如何能確保他們都執行：

function validateRegistrationForm() { 
    var valid = true; 
    valid = validateUsername() && valid; 
    valid = validatePassword() && valid; 
    valid = validateConfirmPassword() && valid; 
    return valid; 
}