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

Answer 2

这看起来你可以使用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 3

您无需同时检查null 和empty string，只需检查该值是否为真。

if (firstName) { 
 // value is truthy 
}

或者更确切地说，您可以使用以下内容，

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

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