如何將兩個if語句合並為一個？

Question

我知道有一種比使用多個if語句更干凈的方法，但是當我嘗試將它們組合時，我的驗證就會停止工作！ 這不是好習慣吧？ 還是在這種情況下，兩個不同的if語句可以嗎？

我的代碼：

function validateForm() {
    var success = true;
    var x = document.forms["contestForm"]["firstName"].value;

    if (x == null || x == "") {

        addClass($('#firstNamespan'), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        success = false;
    } else {
        removeClass($('#firstNamespan'), 'formError');
        addClass($('.validationError'), 'is-hidden');
    }

    var x = document.forms["contestForm"]["lastName"].value;

    if (x == null || x == "") {
        addClass($('#lastNamespan'), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        success = false;
    } else {
        removeClass($('#lastNamespan'), 'formError');        
    }
    return success;
}

我的嘗試結合：

function validateForm() {
    var success = true;
    var x = document.forms["contestForm"]["firstName", "lastName"].value;

    if (x == null || x == "") {
        addClass($('#firstNamespan', '#lastNamespan'), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        success = false;
    } else {
        removeClass($('#firstNamespan', '#lastNamespan'), 'formError');
    }
    return success;
}

那我在做什么錯？ 我還需要添加生日和電子郵件驗證，但我想先清理一下它，使其成為if else語句的怪獸！ 對不起，因為這些額外的無用信息使我不得不編寫更多代碼，因為我需要編寫大量代碼。 發布后，請隨時對其進行編輯和刪除。

Answer 1

通過功能編程將它們組合：

function validateForm() {
    var x = document.forms["contestForm"]["firstName"].value;
    //calls the function checkObject with the object x and the id
    var success1 = checkObject(x, '#firstNamespan');
    //the result of success1 is either true or false.

    var x = document.forms["contestForm"]["lastName"].value;
    //calls the function checkObject with the object x and the id
    var success2 = checkObject(x, '#lastNamespan');
    //the result of success2 is either true or false.

    //returns true if both success1 and success2 are true, otherwise returns false.
    return success1 && success2;
}

function checkObject(x, id)
{
    if (x == null || x == "") {
        addClass($(id), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        return false;
    } else {
        removeClass($(id), 'formError');        
        return true;
    }
}

---

然后可以將其濃縮為

function validateForm() {
    return checkObject($('form[name="frmSave"] #firstName').val(), '#firstNamespan') && checkObject($('form[name="frmSave"] #lastName').val(), '#lastNamespan');
}

function checkObject(x, id)
{
    if (x == null || x == "") {
        addClass($(id), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        return false;
    } else {
        removeClass($(id), 'formError');        
        return true;
    }
}

---

用您的命名模式回答N個字段

function validateForm() {
    var itemsToValidate = ["#firstName", "#lastName", "#birthday", "#email"];
    var results = [];
    $.map( itemsToValidate, function( val, i ) {
        results.push(checkObject($('form[name="frmSave"] ' + val).val(), val + 'span'));
    });

    for(var i=0; i<results.length; i++)
    {
        if(results[i] == false)
            return false;
    }
    return true;
}

function checkObject(x, id)
{
    if (x == null || x == "") {
        addClass($(id), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        return false;
    } else {
        removeClass($(id), 'formError');        
        return true;
    }
}

注意：我沒有驗證上面的任何JavaScript，如果我出錯了，請給我打電話。 我剛在工作時在記事本中輸入

Answer 2

將其分解為功能，並利用數組循環遍歷字段以進行驗證。

function isValidField(fieldName) {
    var value = document.forms["contestForm"][fieldName].value;
    return !(value == null || value == "");
}

function displayFieldError(fieldName) {
    addClass($('#' + fieldName + 'span'), 'formError');
    removeClass($('.validationError'), 'is-hidden');
}

var fields = ['firstName', 'lastName'];
var isValidForm = true;

fields.map(function(fieldName) {
    if (!isValidField(fieldName)) {
        displayFieldError(fieldName);
        isValidForm = false;
    }
});

if (isValidForm) {
    // Form is correct, do something.
}

Answer 3

通過給他們一個單獨的標識符，像這樣

var x = document.forms["contestForm"]["firstName"].value;
var y = document.forms["contestForm"]["lastName"].value;

if ((x == null || x == "") && (y == null || y == "")) {

    addClass($('#firstNamespan'), 'formError');
    removeClass($('.validationError'), 'is-hidden');

    addClass($('#lastNamespan'), 'formError');
    removeClass($('.validationError'), 'is-hidden');
    success = false;

} else {
    removeClass($('#firstNamespan'), 'formError');
    addClass($('.validationError'), 'is-hidden');

    removeClass($('#lastNamespan'), 'formError');        
}

但是您需要更加精確，僅使用addClass會做什么？ 那行不通。 在此方法調用之前，您需要一個JS對象。

我認為，您需要在addClass和removeClass之前的某個元素。 或者他們需要像這樣

$('#firstNamespan').removeClass('formError');

這樣，您需要更改代碼。 這樣對象首先出現，然后是方法調用。

Answer 4

發揮作用，

function validateForm(formName) {
  var x =  document.forms["contestForm"][formName].value;
  if (x == null || x == "") {
    addClass($('#' + formName + 'span'), 'formError');
    removeClass($('.validationError'), 'is-hidden');
    return false;
  }
  removeClass($('#' + formName + 'span'), 'formError');
  addClass($('.validationError'), 'is-hidden');
  return true;
}

那你可以打兩次

function validateForm() {
  var success = validateForm('firstName');
  if (success) {
    success = validateForm('lastName');
  }
  return success;
}

Answer 5

這兩個if檢查兩個不同的表單元素，並顯示和隱藏兩個不同的驗證錯誤元素。

合並它們不僅是代碼重構，而且還會更改功能。

它們唯一的共同點是它們都使用相同的變量“ x”。