Question

如果我们在页面上有多个具有相同值的输入字段，使用jQuery检查的最简单方法是什么？

谢谢大家！

Answer 1

您可以迭代所有input个元素，将它们的值存储在哈希表中，并检查该值是否已存在：

var hash = Object.create(null),
result = [].some.call(document.getElementsByTagName('input'), function(inp) {
   if(hash[inp.value]) return true;
   hash[inp.value] = true;
});

Answer 2

获取所有输入元素，排序并检查是否存在重复项。

 var elements = document.getElementsByTagName("input")
    var values = [];
    for (var i = 0; i < elements.length; i++) {
        values.push(elements[i].value);
    }
    var sortedValues = values.sort();
    for (var o = 0; o < values.length-1; o++) {
        if (values[o] == values[o+1])
            alert ('Duplicate!');
    }

Answer 3

解决方案是编写循环并遍历每个输入字段以进行可能的匹配。如果您正在使用 jQuery ，那么它实际上非常简单。

我们假设我们有一个包含3个输入字段的简单HTML页面。

HTML：

<input type="text" name="input1">
<input type="text" name="input2>
<input type="text" name="input3">

然后我们使用jQuery each()方法迭代字段。主要是说，我们遍历所有输入字段并获取它们的值。然后我们再次遍历所有输入字段（实际上是创建一个嵌套循环）并检查它们中是否有任何匹配当前迭代的输入值。

jQuery：

 var currentInput;
$("input").each(function(index) {
  currentInput = $(this);
  $("input").each(function(index) {
    if currentInput.val() === $(this).val() {
      alert("Error: input fields match found");
    }
  });
});

Answer 4

您可以循环所有输入并生成如下所示的数据结构。

var inputs = {};
$("input").each(function(i, elem) {
    if (inputs.hasOwnProperty(elem.value)) {
        inputs[elem.value] += 1;
    } else {
        inputs[elem.value] = 1;
    }
});
alert (JSON.stringify(inputs, null, 4))

A Demo

Answer 5

我想在多个输入字段中检查重复值时提供更有效的答案。在比较我们需要的值时，

迭代并暂时保留当前元素
重新迭代并检查先前保存的值是否为重复
执行步骤2时，我们需要确保跳过将之前保存的（步骤1）值与自身进行比较。

如果我没错，我在上述所有答案中都看过第1步和第2步，但第3步却没有。

以下代码将完成所有这3个步骤。

  var eqArr = []; 
  var currentInput;
  $("input").each(function(k1, v1) {
    if($(v1).val() != ''){
      currentInput = $(v1);
      $("input").each(function(k2, v2) {
        if(k1 !== k2 && 
           currentInput.val() === $(v2).val() &&
           $.inArray($(this).attr('id'), eqArr) === -1){
           eqArr.push($(this).attr('id'));
        }
      });
    }        
  });

在上面的代码中，我收集了那些重复项（在数组中）的输入字段的id。执行上述逻辑后，执行以下简单检查将告诉您是否有重复项。

if(eqArr.length > 0){
     //It means we have duplicates                            
}

var eqArr = [];
var currentInput;
$("input").each(function(k1, v1) {
  if ($(v1).val() != '') {
    currentInput = $(v1);
    $("input").each(function(k2, v2) {
      if (k1 !== k2 &&
        currentInput.val() === $(v2).val() &&
        $.inArray($(this).attr('id'), eqArr) === -1) {
        eqArr.push($(this).attr('id'));
      }
    });
  }
});
console.log(eqArr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Input Field Duplicates</title>
</head>
<body>
  <input type="text" name="input1" id="i1" value="bbb">
  <input type="text" name="input2" id="i2" value="aaa">
  <input type="text" name="input3" id="i3" value="aaa">
  <input type="text" name="input3" id="i4" value="fff">
  <input type="text" name="input3" id="i5" value="bbb">
  <input type="text" name="input3" id="i6" value="ccc">
  <input type="text" name="input3" id="i7" value="bbb">
  <input type="text" name="input3" id="i8" value="bbb">
</body>
</html>

检查是否有多个具有相同值的输入字段

5 个答案:

HTML：

jQuery：