jquery - 限制不同表单之间的重复表单输入

Question

我的表单输入在同一表单中以及跨表单中不能相同，即两个表单名称或表单姓氏或(表单名称和表单姓氏)不能相同。我可以用下面的代码来实现这一点。我不知道它消耗了多少空间和时间，以及它会带来哪些错误。是否建议使用两个 for 循环？还有其他更好的办法吗？如果是这样，请建议...

$(document).ready(function () {
                $(".button").on("click", function () {
                    var f1name = $("#f1name").val();
                    var f1surname = $("#f1surname").val();
                    var f2name = $("#f2name").val();
                    var f2surname = $("#f2surname").val();
                    var f3name = $("#f3name").val();
                    var f3surname = $("#f3surname").val();
                    var f4name = $("#f4name").val();
                    var f4surname = $("#f4surname").val();
                    var names = [f1name, f1surname, f2name, f2surname, f3name, f3surname, f4name, f4surname];
                    //console.log(names);
                    //console.log(isDuplicateFound(names));
                    if (isDuplicateFound(names)) {
                        alert("Names and surnames cannot be same in same form and across forms");
                        return false;
                    }
                    function isDuplicateFound(names) {
                        for (var i = 0; i < names.length; i++) {
                            for (var j = 0; j < names.length; j++) {
                                if (i != j && names[i] == names[j]) {
                                    return true;
                                }
                            }
                        }
                        return false;
                    }
                });
            });
        

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="f1" name="f1">
            <input type="text" id="f1name" name="f1name">
            <input type="text" id="f1surname" name="f1surname">
            <input type="button" class="button" value="Save">
        </form>
        <form method="post" id="f2" name="f2">
            <input type="text" id="f2name" name="f2name">
            <input type="text" id="f2surname" name="f2surname">
            <input type="button" class="button" value="Save">
        </form>
        <form method="post" id="f3" name="f3">
            <input type="text" id="f3name" name="f3name">
            <input type="text" id="f3surname" name="f3surname">
            <input type="button" class="button" value="Save">
        </form>
        <form method="post" id="f4" name="f4">
            <input type="text" id="f4name" name="f4name">
            <input type="text" id="f4surname" name="f4surname">
            <input type="button" class="button" value="Save">
        </form>

Answer 1

一些优化:

将类添加到表单的输入元素，例如 <input type="text" class="val-getter">

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

</script>
<form method="post" id="f1" name="f1">
    <input type="text" class="val-getter" id="f1name" name="f1name">
    <input type="text" id="f1surname" class="val-getter" name="f1surname">
    <input type="button" class="button" value="Save"> </form>
<form method="post" id="f2" name="f2">
    <input type="text" class="val-getter" id="f2name" name="f2name">
    <input type="text" class="val-getter" id="f2surname" name="f2surname">
    <input type="button" class="button" value="Save"> </form>
<form method="post" id="f3" name="f3">
    <input type="text" id="f3name" class="val-getter" name="f3name">
    <input type="text" id="f3surname" class="val-getter" name="f3surname">
    <input type="button" class="button" value="Save"> </form>
<form method="post" id="f4" name="f4">
    <input type="text" class="val-getter" id="f4name" name="f4name">
    <input type="text" class="val-getter" id="f4surname" name="f4surname">
    <input type="button" class="button" value="Save"> </form>

这将允许您通过以下 JavaScript 一次性获取姓名字段的所有值:

$(document).ready(function(){
 $(".button").click(function(){
  var names = $(".val-getter").map(function(){
   return $(this).val().toLowerCase();
  });
  if(!names.length){
   alert("empty values!");
   return false;
  }
  if(names.length === jQuery.unique(names).length){
   alert("No Duplicates");
   return false;
  }
  return true;
 });
});

我们从类 .val-getter 中获取输入名称的所有值并存储在名称变量中。我还转换了 names转换为小写以确保正确检查。

我还添加了对空数组的检查，即没有输入值。 如果不存在，这可能会本质上破坏逻辑

我用过jQuery.unique()函数来检查重复项，例如:所有形式的名字或姓氏都不会具有相同的值。通过比较原数组和unique()之后的数组的长度我们得到函数，因为它删除了数组中的所有重复项。