Question

我的表单输入在同一表格中也不能相同，也可以在表格中相同，即，没有两个表格名称或表格姓氏或（表格名称和表格姓氏）不能相同。我可以使用以下代码实现此目的。我不知道它消耗了多少空间和时间以及它可以提供的所有错误。是否建议使用两个for循环？还有其他更好的方法吗？如果是这样，请建议......

＆＃13;

$(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;
                    }
                });
            });

＆＃13;

<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>

＆＃13;

Answer 1

一些优化建议：

<强> 1。在click事件之外声明函数'components' => [ 'view' => [ 'theme' => [ 'pathMap' => [ '@backend/views'=>'@backend/themes/myTheme', ], ], ], ],。

如果你在里面声明它，它会在你每次点击时完成。将其放在isDuplicateFound(names)中，但不在点击事件块中。

<强> 2。 $(document).ready() - 优化

当你在循环中运行时，你会做一些无用的检查。此外，您可以放弃for - 检查并声明i != j，同时避免重复检查。所以你的最终代码看起来像这样：

j = i + 1

$(document).ready(function () { function isDuplicateFound(names) { for (var i = 0; i < names.length; i++) { for (var j = i + 1; j < names.length; j++) { if (names[i] == names[j]) { return true; } } } return false; } $(".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; } }); }); - 彼此之间的循环以指数方式降低性能，但在我看来，如果它仅用于检查8个数组元素，这不是什么大问题。

如果您不想使用数组，可以这样做：

为输入提供一个公共类（例如for）。然后，您可以使用jQuery的name_input方法迭代它们。

.each()

Answer 2

一些优化：

将类添加到表单的输入元素，如<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变量中。我还将names转换为小写以确保正确检查。

我还添加了一个空数组检查，即没有输入值。 如果不存在，那基本上可以打破逻辑

我已使用jQuery.unique()函数检查重复项，以便： 没有名字或姓氏将在所有表格中具有相同的值。通过比较原始数组的长度和我们在unique()函数之后得到的数组，因为它删除了数组中的任何重复项。

Answer 3

我也使用嵌套循环，但我建议使用class而不是ID，例如名称类和用户名类，并使用 jquery每个：

$(".button").on("click", function () {
   var $current;

   $(".name").each(function () {
      $current=$(this);
      $(".name").not(this).each(function(){
            if($current.val() == $(this).val()) { return false; }
      });
    });

   $(".username").each(function () {
      $current=$(this);
      $(".username").not(this).each(function(){
            if($current.val() == $(this).val()) { return false; }
      });
    });

  return true;
 });

限制跨不同表单的重复表单输入

3 个答案: