javascript - 根据长度 : skip empty values 比较两个数组

Question

我有一个包含 4 个输入(甚至更多)的表单，用户可以在其中输入数字或什么都不输入。唯一的规则是，如果您在一个输入中输入了一个数字，而另一个输入中有相同的数字(没有重复)，则您不能提交。您可以提交任意数量的空输入。

为了验证输入，我将所有输入数组的长度与仅具有唯一值的同一数组进行比较。如果他们有相同的长度就可以了。 我需要改进我的代码，因为现在它只有在用户输入所有输入字段时才有效。如果某些输入为空，则它们在数组中被视为具有唯一值，因为它们都具有“”作为值。因此，如果用户只输入一个数字，我会得到数组长度为 4，数组唯一为 2，但它应该是 1 和 1(跳过空白项)。

我正在考虑在 arr 上使用 splice()，但这是进行此验证的最佳方式吗？ **编辑:如果数组是 ('1','','') 我应用了 splice 但我的代码给我的是 ('1','') 而不是我期望的 (1) ... * * 这是因为 splice 移除项并更改数组长度，使得 for 循环指向错误的索引。 任何想法？ HTML:

<div class="sez-form">
    <fieldset>
        <legend>Messaggi inclusi</legend>
        <div class="percheckbox">
            <input class="checkseq" type="checkbox" value="1" name="messaggio[0]">
            Prova di messaggio che scorre<br>
            <label>Ordine: </label>
            <input class="seq" type="text" name="ordine[0]" maxlength="2" size="2">
        </div>

        <div class="percheckbox">
            <input class="checkseq" type="checkbox" value="3" name="messaggio[1]">
            Titoli di film<br>
            <label>Ordine: </label>
            <input class="seq" type="text" name="ordine[1]" maxlength="2" size="2">
        </div>

        <div class="percheckbox">
            <input class="checkseq" type="checkbox" value="6" name="messaggio[2]">
            Prova a testo fisso<br>
            <label>Ordine: </label>
            <input class="seq" type="text" name="ordine[2]" maxlength="2" size="2">
        </div>
        <br style="clear: both;">
    </fieldset>
</div>

JavaScript:

function uniqueArray(arr) {
    return $.grep(arr,function(v,k) {
        return $.inArray(v,arr) === k;
    });
}

$(document).ready(function() {
    $('#invia').click(function(e) {
        e.preventDefault();
        var arr = $(".seq").map(function(){ return $(this).val(); }).toArray();
        var empty = $(".seq").filter(function() {
            return this.value == "";
        })
    for (index = 0; index < arr.length; ++index) {
        if (arr[index]=='') {
            new_arr = arr.splice([index],1);
        }
        console.log(arr);
    }

        if(empty.length == $('.seq').length) {
            alert('Non hai scelto alcun messaggio per il workflow. Correggi per procedere.');
        }
        else if(uniqueArray(arr).length != $('.seq').length) {
            console.log(uniqueArray(arr));
            alert('Ci sono voci duplicate nella sequenza. Correggi per procedere.');
        }
        else if($('#dt_from').val()=='__/__/____ __:__') {
            alert('Scegli data e ora di inizio validit\u00E0 per il workflow');
        }
        else if($('#dt_to').val()=='__/__/____ __:__') {
            alert('Scegli data e ora di fine validit\u00E0 per il workflow');
        }
        else {
            ajaxSubmit();
        }
    });
});

Answer 1

这是另一种可能的处理方式。 Here is the working JSFiddle.这是代码:

$(function() {
    $("#submit").click(function() {
        //build a profile of the inputs
        var inputs = [];
        var values = [];
        var dups = false; //track duplicates on pass 1

        $(".seq").each(function(i, el) {
            var empty = (el.value == ""); //check if empty
            var exists = (!empty && $.grep(inputs, function(item, index) {
                return (item.Value === el.value);
            }).length > 0); //check if exists
            dups = (dups || exists); //track dups

            //add the new input item
            var obj = {
                Element: el,
                Value: el.value,
                Empty: empty,
                Exists: exists
            };
            inputs.push(obj);

            //conditionally add the sorting value
            if (!empty && !exists)
                values.push(el.value);
        });

        //Validate the inputs. If there are duplicates, don't submit
        $(".seq").css("background-color", "white"); //clear errors
        if (dups) {
            $(inputs).each(function(i, el) {
                if (el.Exists) 
                    el.Element.style.backgroundColor = "red";
            });
        } else {
            values = values.sort();
            alert(values);
        }
    });
});

使用此方法，最后您将获得一个数组 - inputs - 所有元素及其状态，以便您可以对特定字段提供错误处理。在我的示例中，错误字段变为红色。

在 alert 处，您有一个有效值的排序数组。