使用javascript驗證表單的正確方法（簡單）

Question

我有一個有五個字段的表單; first name，last name,username，password和passwordConfirmation。

我首先想說的是，我不想要最複雜的方法，這是一個非常簡單的網站，永遠不會上線，它純粹是爲了演示目的，我不擔心錯誤捕捉在有害的用戶輸入意義上。

到目前爲止，我有這樣的：

function validateRegistrationForm(firstName, lastName, username, password, passwordConfirmation) { 
alert("validate form function has been called"); 
//alert("function has been called"); 

//--- 


var firstName = firstName; 
//alert(firstName); 
var lastName = lastName; 
//alert(lastName); 
var username = username; 
//alert(username); 
var password = password; 
//alert(password); 
var passwordConfirmation = passwordConfirmation; 
//alert(passwordConfirmation); 

//--- 

//**The code that I have sectioned off here, I am unsure whether I need it or not, could someone please explain to me why I would do this, and not just reference the parameters in the function directly?** 

// Check here if all the fields in the registeration form have been filled. 

if (firstname == null || firstname == "") { 
    //firstname hasn't been filled out 
} 

if (lastName == null || lastName == "") { 
    //lastname hasn't been filled out 
} 

if (username == null || username == "") { 
    //username hasn't been filled out 
} 

if (password == null || password == "") { 
    //password hasn't been filled out 
} 

if (passwordConfirmation == null || passwordConfirmation == "") { 
    //passwordconfirmation hasn't been filled out 
} 
} 

我想有一個方法來檢查，如果每個字段已經填寫了（我在這裏，我認爲）的，如果沒有，產生例如圍繞所述輸入元素的紅色邊框的通知和/或具有關於如何解決問題的指示的消息。我知道這可以用CSS來完成，但我不確定最有效的方法。

目前我已經創建了這兩個功能：

function generateError(messageText, elementIdentifier) { 
alert("error generator called");  
//var element = document.getElementById(elementID); 
//var error = document.createTextNode(message); 
//element.innerHTML = message; 
alert("Element: " + elementIdentifier + ", Reason: " + messageText); 
} 

function validatePassword(password, passwordConfirmation) { 
alert("password check called"); 
if (password == passwordConfirmation) { 
    if (password.length < 8) { 
     //password too short 
     //alert("password\'s match but they are too short"); 

     return false; 
    } else { 
     //passwords match and the right length 
     //alert("password\'s match and they are 8 characters or longer"); 
     return true; 
    } 
} else { 
    //the two do not match 
    //alert("they don\'t match") 
    generateError("Passwords don\'t match", "password"); 
    return false; 
} 
} 

的validatePassword()函數採用密碼和確認密碼兩個參數，我想這樣的作品已經，我要的是用於傳遞生成的錯誤到generateError()函數將它們全部存儲在一個數組中，然後逐個遍歷它們向用戶顯示出什麼是錯誤的。

Answer 1

定義複雜。我認爲你的代碼已經太複雜了。贈品是有重複的。無論什麼時候你看到重複，問問自己是否有辦法將所有重複組合成一個循環。結果是代碼更少，但通常也是更友好的代碼。例如，如果您想添加電話號碼，則必須再添加四行代碼以及另一個參數，這會破壞您的功能的向後兼容性，除非您添加更多的代碼以允許未定義的電話號碼。你可能會說：「我絕對不會添加更多的字段，所以這不是問題。」我不知道自己說了多少次，結果不得不吃掉我的話語，並對我的功能進行手術。此外，它只是更好的工程。

另外，讓我們重新審視您的validateRegistrationForm函數。現在你有這種方式，我的猜測是它是由onsubmit觸發的，但爲什麼不通過爲用戶提供每個域的即時反饋來利用JavaScript的快感？我將把它改爲validateRegistrationElement，它將被稱爲onchange。我們只會傳入一個參數，正在評估的文本框。這樣我們可以使用「這個」。因此，每個文本框看起來像：

<input type="text" id="firstname" onchange="validateRegistrationElement(this)" /> 

此外，相鄰的，讓我們把反饋框旁邊的每個文本框，擺脫那些煩人的彈出窗口警告的。我們甚至可以使用CSS類名「錯誤」和「成功」來設計我們的反饋框，並分別將它們設爲紅色或綠色。

<div id="firstnameFeedback"></div> 

...等等。

的CSS：

.error {background-color: pink; border: 1px dashed red; color: white} 
.success {border: 1px dashed green;} 

而是裝載了我們與每個表單元素的細節的功能，讓我們的說明分成一種配置變量，對象數組的。數組中的每個成員都將代表一個表單元素，因此在您的情況下，將會有四個數組成員。這些對象將包含函數需要知道的報告錯誤的所有信息。我的建議是，讓每個對象包含表單元素，標籤，要求的ID（用自己的反饋消息配對將是理想的正則表達式的數組，但是讓我們保持它的簡單與字符串長度），以及一個特殊的條件爲密碼匹配。

var myFields = 
    [ 
    { 
    "id": "firstname", 
    "label": "first name", 
    "minLength": 1 //in other words, the field is required 
    }, 
    { 
    "id": "lastname", 
    "label": "last name", 
    "minLength": 1 
    }, 
    { 
    "id": "password1", 
    "label": "first password", 
    "minLength": 6, 
    "maxLength": 8, 
    "mustMatch": "password2" 
    }, 
    { 
    "id": "password2", 
    "label": "second password", 
    "minLength": 6, 
    "maxLength": 8, 
    "mustMatch": "password1" 
    }, 
    ] 

這太複雜了嗎？我不這麼認爲。現在我們有一桶我們的驗證器功能可以達到的樂透。我們可以輕鬆地添加或減少元素。我們甚至可以在以後添加功能，如果我們想要的話，它不會中斷功能（如密碼最大長度，我已經離開功能）。我會給你看。這是新的驗證器功能。請記住，只要用戶更改字段中的值，就會調用它。該函數將知道哪一個是因爲我們在我們的html中使用了「this」。

function validateRegistrationElement(field) { 
    var message = ""; //declare an empty string literal for the message 
    for (i=0;i<myFields.length; i++){ //loop through each array element until we find the object 
    if(myFields[i].id == field.id){ //once we've found the config object 
    if(myFields[i].minLength > field.value.length){ //if the field is shorter than what's allowed 
    message += myFields[i].label + " must be longer than " + myFields[i].minLength; 
    } 
    if (typeof(myFields[i].mustMatch) != 'undefined'){ //if the field must match another... 
    if(field.value != document.getElementById(myFields[i].mustMatch)){ //...does it match 
     message += myFields[id].label +" must match "+myFields[id].mustMatch; 
    } 
    } 
    document.getElementById(field.id + "Feedback").innerText = message; 
    if (message.length > 0) {setClass(field.id, "error")} //if there an error message, highlight red 
    else{setClass(field.id, "success")}//otherwise, highlight green 
    } 
    } 
} 

注意，這也需要照顧的密碼，所以你並不需要爲他們額外的功能。

此功能管理CSS和由上述函數調用。

function setClass(id, className) { 
    document.getElementById(id).className = ""; 
    document.getElementById(id).className = className; 
    document.getElementById(id+"Feedback").className = ""; 
    document.getElementById(id+"Feedback").className = className; 
} 

Answer 2

試試偉大的jQuery Validation plugin。

你需要多一點的標記（見演示和文檔），只是$("#yourForm").validate();。