Javascript：多层条件，使用“return false”停止以后的条件检查

Question

Return false 并没有达到我想要的效果。如果任何一个条件通过，我希望它阻止表单提交，但我仍然希望它沿着条件树继续。现在，如果第一个条件 if ($(".item.active").length == 0) { 通过，它会命中 return false; 并阻止后面的条件检查。

我怎样才能重写它以更好地工作？

$('#go').click(function() {

    function invalidBtn(){
        $('#go').addClass('invalid');
        setTimeout(function() {
            $('#go').removeClass('invalid');
        }, 5000)
    }

    $('.error').remove();
    $('.invalid').removeClass('invalid');

    if ($(".item.active").length == 0) {
        $(".item:first-of-type").before('<h5 class="error">Select a shirt type</h5>');
        invalidBtn();
        return false;

    } else {

        if ( $(".item.active .size-select .active").length == 0) {
            $('.item.active .size-select').before("<div class='error'>Select a size</div>").addClass("invalid");
            //$(this).addClass('invalid');
            invalidBtn();
            return false;
        }

        if ($(".item.active .gender-select").length > 0 ) {
            if ( $(".item.active .gender-select .active").length == 0 ){
                $('.item.active .gender-select').before("<div class='error'>Select a gender</div>").addClass("invalid");
                //$(this).addClass('invalid');
                invalidBtn();
                return false;
            }
        }
    }

    if ( !$('#fn-field').val() ) {
        $('#fn-field').before("<div class='error'>Enter your first name</div>").addClass("invalid");
        //$(this).addClass('invalid');
        invalidBtn();
        return false;
    }

    if ( !$('#ln-field').val() ) {
        $('#ln-field').before("<div class='error'>Enter your last name</div>").addClass("invalid");
        //$(this).addClass('invalid');
        invalidBtn();
        return false;
    }

});

非常感谢

Answer 1

Return false 并没有完全按照我的意愿去做。如果任何一个条件通过，我希望它阻止表单提交，但我仍然希望它沿着条件树继续。现在，如果第一个条件 if ($(".item.active").length == 0) { 通过，它会返回 false；并停止检查后面的条件。

对，因为return退出了函数。

如果你想继续浏览它后面的代码，不要使用return，在最后设置一个你返回的变量。例如：

var valid = true;

if (someInvalidCondition) {
    // ...do anyting condition-specific...
    valid = false;
}
if (someOtherInvalidCondition) {
    // ...do anyting condition-specific...
    valid = false;
}
// Rinse, repeat

// Done
return valid;

或者我通常喜欢返回错误计数。或错误列表（数组）。等等。

Answer 2

只需将所有 return false 替换为布尔值，然后返回布尔值，如下所示：

$('#go').click(function() {

function invalidBtn(){
    $('#go').addClass('invalid');
    setTimeout(function() {
        $('#go').removeClass('invalid');
    }, 5000)
}

var retVal = true;

$('.error').remove();
$('.invalid').removeClass('invalid');

if ($(".item.active").length == 0) {
    $(".item:first-of-type").before('<h5 class="error">Select a shirt type</h5>');
    invalidBtn();
    retVal = false;

} else {

    if ( $(".item.active .size-select .active").length == 0) {
        $('.item.active .size-select').before("<div class='error'>Select a size</div>").addClass("invalid");
        //$(this).addClass('invalid');
        invalidBtn();
        retVal = false;
    }

    if ($(".item.active .gender-select").length > 0 ) {
        if ( $(".item.active .gender-select .active").length == 0 ){
            $('.item.active .gender-select').before("<div class='error'>Select a gender</div>").addClass("invalid");
            //$(this).addClass('invalid');
            invalidBtn();
            retVal = false;
        }
    }
}

if ( !$('#fn-field').val() ) {
    $('#fn-field').before("<div class='error'>Enter your first name</div>").addClass("invalid");
    //$(this).addClass('invalid');
    invalidBtn();
    retVal = false;
}

if ( !$('#ln-field').val() ) {
    $('#ln-field').before("<div class='error'>Enter your last name</div>").addClass("invalid");
    //$(this).addClass('invalid');
    invalidBtn();
    retVal = false;
}

return retVal;

});