Javascript表單驗證，如果語句太多？

Question

我有五行，firstName，lastName，username，password和passwordConfirmation

var errors = []; 
var errorsText = []; 


function generateError(messageText, elementIdentifier) { 
var messageText = messageText; 
var elementIdentifier = elementIdentifier; 
errors.push(elementIdentifier); 
errorsText.push(messageText); 
return false; 
} 



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

var firstName = firstName; 
//alert("First Name = \'" + firstName + "\'"); 
var lastName = lastName; 
//alert("Last Name = \'" + lastName + "\'"); 
var username = username; 
//alert("Username = \'" + username + "\'"); 
var password = password; 
//alert("Password = \'" + password + "\'"); 
var passwordConfirmation = passwordConfirmation; 
//alert("Password Confirmation = \'" + passwordConfirmation + "\'"); 

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

    generateError("You must provide a First Name", "firstName"); 
} 

if ((lastName == null) || (lastName == "")) { 
    //lastname hasn't been filled out 
    generateError("You must provide a Last Name", "lastName"); 
} 

if ((username == null) || (username == "")) { 
    //username hasn't been filled out 
    generateError("You must enter a Username", "username"); 
} 

if ((password == null) || (password == "")) { 
    //password hasn't been filled out 
    generateError("You haven\'t entered a password", "password"); 
} 

if ((passwordConfirmation == null) || (passwordConfirmation == "")) { 
    //passwordconfirmation hasn't been filled out 
    generateError("You haven\'t confirmed your password", "passwordConfirmation"); 
} 

validatePassword(password, passwordConfirmation); 

} 

有沒有更好的方式來處理所有的if statements的一種形式？

Answer 1

這看起來像是你可以使用Logical OR短路的

function validateRegistrationForm(firstName, lastName, username, password, passwordConfirmation) { 
    formReset(); 
    firstName || generateError("You must provide a First Name", "firstName"); 
    lastName || generateError("You must provide a Last Name", "lastName"); 
    username || generateError("You must enter a Username", "username"); 
    password || generateError("You haven\'t entered a password", "password"); 
    passwordConfirmation || generateError("You haven\'t confirmed your password", "passwordConfirmation"); 
    validatePassword(password, passwordConfirmation); 
} 

Answer 2

而不是檢查null和empty string，你可以檢查，看看是否值truthy。

if (firstName) { 
// value is truthy 
} 

或者說你可以用下面

if (!firstName) { 
// value is non-truthy 
generateError("You must provide a First Name", "firstName"); 
} 

Answer 3

考慮創建地圖字段名稱和錯誤消息：

var errorMessages = { 
    firstName:"You must provide a First Name", 
    lastName: "You must provide a Last Name", 
    username: "You must enter a Username", 
    password: "You haven't entered a password", 
    passwordConfirmation: "You haven\'t confirmed your password" 
}; 

也許一個小的輔助函數有條件地引發錯誤：

var assertIsFilled = function(name, value) { 
    if(!value) { 
    generateError(errorMessages[name], name); 
    } 
}); 

這會很好地清理你的驗證功能：

function validateRegistrationForm(firstName, lastName, username, password, passwordConfirmation) { 
    formReset(); 
    assertIsFilled("firstName", firstName); 
    assertIsFilled("lastName", lastName); 
    assertIsFilled("username", username); 
    assertIsFilled("password", password); 
    assertIsFilled("passwordConfirmation", passwordConfirmation); 

    validatePassword(password, passwordConfirmation); 
} 

Answer 4

你能不能做這樣的事？ ：

jQuery(":input").bind("blur change",function(){ 
    if(jQuery(this).val()===null || jQuery(this).val()===""){ 
    generateError(); 
    } 
}) 

此外，您可以篩選出不需要驗證的輸入。

生JS版：

var inputs = document.getElementsByTagName('input'); 

for (var i=0, len=inputs.length; i<len; i++){ 
    if (inputs[i].type == 'text'){  
     inputs[i].onclick = function(){ 
       if(this.value===null || this.value===""){ 
       generateError(); 
       }  

     } 
//same for onBlur 
    } 
}