检查 HTML 输入文本框中的重复值并将边框涂成红色不起作用

Question

我正在尝试实现一个 Javascript 函数，该函数应该检测带有重复值的 HTML 输入文本框（它们都属于同一个类），并用红色突出显示它的边框，但它不能正常工作：它只绘制了一些具有重复值的输入框，而不是所有输入框，视情况而定。例如，如果第一个、第三个和第四个文本框插入了重复值，则仅绘制第三个和第四个文本框。但是，如果第二个框与其他 3 个具有相同的值，则所有框都被绘制。我想知道如何解决这个问题。提前致谢！

这是 JS 代码顺便说一句：

function CheckDuplicates(){

                var numbers = [];

                $('input[class="allinput planrequestnumber"]').each( function(i,e) {
                    numbers.push($(e).attr('id'));
                });

                var duplicatesExist = false;

                for (var i = 0; i < numbers.length; i++) {

                    var first = '#' + numbers[i];
                    var second = '#' + numbers[i+1];

                    if(($(first).val().length == 9) && ($(second).val().length == 9)){
                        if($(first).val() == $(second).val()){
                            $(first).css('box-shadow', 'inset 0 0 0 3px red');
                            $(second).css('box-shadow', 'inset 0 0 0 3px red');
                            duplicatesExist =  true;
                        }
                        else{
                            $(first).css('box-shadow', '');
                            $(second).css('box-shadow', '');
                            duplicatesExist =  false;
                        }
                    }
                }
                return duplicatesExist;
            }

以及 HTML 代码（用于输入框）：

    <INPUT id="num_principal" runat="server" style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="0" NAME="num_principal">

<INPUT id="num_extra_1" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="1" NAME="num_extra_1">

<INPUT id="num_extra_2" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="2" NAME="num_extra_2">

<INPUT id="num_extra_3" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onkeypress="return isNumberKey(event)" onkeyup=ValPhone(this); onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="3" NAME="num_extra_3">

更新：我对我的 JS 代码做了一些小的调整，但它仍然不能完全正常工作。当文本框内部有重复值时，仍然存在不绘制文本框的情况。

function CheckDuplicates(){

                    var numbers = [];

                    $('input[class="allinput planrequestnumber"]').each( function(i,e) {
                        numbers.push($(e).attr('id'));
                    });

                    var sortedNum = numbers.slice().sort();

                    var duplicatesExist = false;

                    for (var i = 0; i < numbers.length -1; i++) {

                        var first = '#' + sortedNum[i];
                        var second = '#' + sortedNum[i+1];

                        if(($(first).val().length == 9) && ($(second).val().length == 9)){
                            if($(first).val() == $(second).val()){
                                $(first).css('box-shadow', 'inset 0 0 0 3px red');
                                $(second).css('box-shadow', 'inset 0 0 0 3px red');
                                duplicatesExist =  true;
                            }
                            else{
                                $(first).css('box-shadow', '');
                                $(second).css('box-shadow', '');
                            }
                        }
                    }
                    return duplicatesExist;
                }

Answer 1

我已经清理了你的一些并留下了 cmets，以便你可以继续。

function CheckDuplicates() {
    var values = [];  //Create array where we'll store values

    $(".duplicate").removeClass("duplicate"); //Clear all duplicates
    var $inputs = $('input[class="allinput planrequestnumber"]'); //Store all inputs 
    
    $inputs.each(function() {   //Loop through the inputs
    
        var v = this.value;
        if (!v) return true; //If no value, skip this input
        
        //If this value is a duplicate, get all inputs from our list that
        //have this value, and mark them ALL as duplicates
        if (values.includes(v)) $inputs.filter(function() { return this.value == v }).addClass("duplicate");
        
        values.push(v); //Add the value to our array
    });
    
    return $(".duplicate").length > 0;

};

.duplicate {
    box-shadow: inset 0 0 0 3px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<INPUT id="num_principal" runat="server" style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="0" NAME="num_principal">

<INPUT id="num_extra_1" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="1" NAME="num_extra_1">

<INPUT id="num_extra_2" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="2" NAME="num_extra_2">

<INPUT id="num_extra_3" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="3" NAME="num_extra_3">