javascript - 将输入中的数据收集到数组中以进行验证

Question

我正在寻找一种方法来遍历一组输入，将每个输入的数据附加到一个数组中，以便我可以检查数组是否为空，从而允许我验证我的一个或多个输入是否已被填充出去。我正在使用欧芹进行验证，但客户想要一种方法来确保至少填写其中一个元素。

目前我把它作为一个巨大的 jQuery 需求/规则设置工作。但我觉得它很笨重，我的另一个想法会节省空间和时间。

我的 jsfiddle

// validate form    
$("#signupform").validate({
    rules: {
        telephone: {
            required: function (element) {
                if (($("#mobile").val().length > 0) || ($("#olb").val().length > 0) || ($("#ach").val().length > 0)|| ($("#internet").val().length > 0) || ($("#paper").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        mobile: {
            required: function (element) {
                if (($("#telephone").val().length > 0) || ($("#olb").val().length > 0) || ($("#ach").val().length > 0)|| ($("#internet").val().length > 0) || ($("#paper").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }

            }
        },
        olb: {
            required: function (element) {
                if (($("#telephone").val().length > 0) || ($("#mobile").val().length > 0) || ($("#ach").val().length > 0)|| ($("#internet").val().length > 0) || ($("#paper").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        ach: {
            required: function(element) {
                if (($("#telephone").val().length > 0) || ($("#olb").val().length > 0) || ($("#mobile").val().length > 0)|| ($("#internet").val().length > 0) || ($("#paper").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        internet: {
            required: function(element) {
                if (($("#telephone").val().length > 0) || ($("#olb").val().length > 0) || ($("#ach").val().length > 0)|| ($("#mobile").val().length > 0) || ($("#paper").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        paper: {
            required: function(element) {
                if (($("#telephone").val().length > 0) || ($("#olb").val().length > 0) || ($("#ach").val().length > 0)|| ($("#internet").val().length > 0) || ($("#mobile").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    }
});

Answer 1

最终这样做（jsfiddle）：

<form id="signupform">
    <select id="masterSelect">
        <option value="">nuttin</option>
        <option value="stuff">asdfasdf</option>
    </select>
    <div class="required-group">
        <input id="telephone" name="telephone" />
        <br/>
        <input id="mobile" name="mobile" />
        <br/>
        <input id="ach" name="ach" />
        <br />
        <input id="internet" name="internet" />
        <br />
        <input id="paper" name="paper" />
    </div>
    <button id="submit" type="submit">Submit</button>
</form>
<script>
$('#masterSelect').on('change', function () {
    if (this.value == "stuff") {
        $('#submit').attr("disabled", "disabled");
    } else {
        $('#submit').removeAttr("disabled");
    }
});
$('.required-group input').on('change', function () {
    var atLeastOneFilled = false;
    atLeastOneFilled = $(this).filter(function () {
        return $.trim(this.value) !== '';
    }).length > 0;

    if (atLeastOneFilled == true) {
        $('#submit').removeAttr("disabled");
    }
    else {
        $('#submit').attr("disabled", "disabled");
    }
});
</script>

Answer 2

这不适合验证插件，但这是一个简单的解决方案：

http://jsfiddle.net/yKRdh/

var atLeastOneFilled = $('input:not([type="submit"]').filter(function () {
    return $.trim(this.value) !== '';
}).length > 0;

Answer 3

我对欧芹不熟悉，但是这个 jQuery 会告诉你是否至少填写了一个输入：

var atLeastOneFilledOut = $(':input')
    .filter(function() {
        var val = $(this).val();
        return val != "" && val != 0;
    }).length;

也许您可以在表单级规则中使用上述功能。