JavaScript形式验证，如果if语句过多？

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

考虑创建一个字段名称和错误消息的映射：

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