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

两个ifs正在检查两个不同的表单元素，并显示和隐藏两个不同的验证错误元素。

将它们组合起来不仅仅是代码重构，还会改变功能。

他们唯一的共同点是他们都使用相同的变量＆＃39; x＆＃39;。

如何将两个if语句合并为一个？

5 个答案:

通过函数式编程将它们组合在一起：

然后可以将其浓缩为

使用您的命名模式