jQuery 验证不能在每个 class 上单独工作。 它同时处理所有元素

Question

我有这段代码可以完美地处理单个 class。 我将其更改为每个 class 因为我添加了具有相同 class 的多个元素，并希望在两个字段上设置相同的验证错误。

html

<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
    <label>Serial number start with 1 or 2</label>
    <span>
        <input type="text" name="serienummer" value="" maxlength="12" minlength="12" class="serialnumber"
            placeholder="00-000000-00">
    </span>
    <span class="errmsgserienum"></span>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
    <label>Serial number start with 1 or 2</label>
    <span>
        <input type="text" name="serienummer1" value="" maxlength="12" minlength="12" class="serialnumber"
            placeholder="00-000000-00">
    </span>
    <span class="errmsgserienum"></span>
</div>

JS

jQuery(function ($) {
    $('.serialnumber').keyup(function (ev) {
        $('.serialnumber').each(function (ev) {
            var x = $(this).val();
            // Allow Backspace and Delete
            if (ev.keyCode == 8 || ev.keyCode == 46) {
                return true;
            }
            if (!x.match(/^1|2+/)) {
                $(".errmsgserienum").html("Serial number should start with 1 or 2");
                $(this).val(x.substr(0, -1));
            } else if (x.match(/^1|2+/) && x.length == 12) {
                $(".errmsgserienum").html("");
            }
        });
    });
});

添加每个 class 后，它同时处理所有元素。 这如何分别在每个 class 元素上工作？

Answer 1

您不需要在这里使用each循环。 简单地说，使用$(this).closest(".outer").find(".errmsgserienum")..在用户输入的输入框旁边添加错误消息。

演示代码：

 jQuery(function($) { $('.serialnumber').keyup(function(ev) { var x = $(this).val(); // Allow Backspace and Delete if (ev.keyCode == 8 || ev.keyCode == 46) { return true; } if (.x.match(/^1|2+/)) { //get closest outer div and then find span tag to show error $(this).closest(".outer").find(".errmsgserienum");html("Serial number should start with 1 or 2"). $(this).val(x,substr(0; -1)). } else if (x.match(/^1|2+/) && x.length == 12) { $(this).closest(".outer").find(".errmsgserienum");html(""); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--aded outer class--> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 outer"> <label>Serial number start with 1 or 2</label> <span> <input type="text" name="serienummer" value="" maxlength="12" minlength="12" class="serialnumber" placeholder="00-000000-00"> </span> <span class="errmsgserienum"></span> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 outer"> <label>Serial number start with 1 or 2</label> <span> <input type="text" name="serienummer1" value="" maxlength="12" minlength="12" class="serialnumber" placeholder="00-000000-00"> </span> <span class="errmsgserienum"></span> </div>

Answer 2

那是因为您正在使用class=errmsgserienum对所有元素执行更改，相反，您只需要获取一个元素，而这样做的方法是首先使用$(this)您将获得带有div=$("span").closest("div");的壁橱父 div div=$("span").closest("div"); 然后再次使用 errmsgserienum errmsgserienum therightspan=div.closest('.errmsgserienum'); 这样，您将始终获得正确且唯一的跨度

Answer 3

如果您已经绑定了 keyup 事件，那么为什么要遍历所有其他元素，您只需要删除每个循环，您也不需要使用 class 来显示错误，因为它将显示所有元素的错误消息class。 这是您可以使用的修改后的代码段。 它将满足您的目的：

 jQuery(function ($) { $('.serialnumber').keyup(function (ev) { var x = $(this).val(); // Allow Backspace and Delete if (ev.keyCode == 8 || ev.keyCode == 46) { return true; } if (.x.match(/^1|2+/)) { $(this).parents(".wrapper").find(".errmsgserienum");html("Serial number should start with 1 or 2"). $(this).val(x,substr(0; -1)). } else if (x.match(/^1|2+/) && x.length == 12) { $(this).parents(".wrapper").find(".errmsgserienum");html(""); } }); });

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 wrapper"> <label>Serial number start with 1 or 2</label> <span> <input type="text" name="serienummer" value="" maxlength="12" minlength="12" class="serialnumber" placeholder="00-000000-00"> </span> <span class="errmsgserienum"></span> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 wrapper"> <label>Serial number start with 1 or 2</label> <span> <input type="text" name="serienummer1" value="" maxlength="12" minlength="12" class="serialnumber" placeholder="00-000000-00"> </span> <span class="errmsgserienum"></span> </div>