如何验证最后一个框焦点出的字段

Question

我正在创建一个具有帐号字段的表单。此帐号有 5 个文本框，每个文本框的大小='1'。

<div class="accountNumberWrapper">
    <input class="oneDigit" name="oneDigit" size="1" />
    <input class="twoDigit" name="twoDigit" size="1" />
    <input class="threeDigit" name="threeDigit" size="1" />
    <input class="fourDigit" name="fourDigit" size="1" />
    <input class="fiveDigit" name="fiveDigit" size="1" />
</div>

我正在使用jQuery验证插件，并且只想验证第五个框的焦点上的帐号。我使用了下面的代码，但它在每个盒子的选项卡上进行验证，

rules: {
    'oneDigit': "meterReading", // custom method
    'twoDigit': "meterReading",
    'threeDigit': "meterReading",
    'fourDigit': "meterReading",
    'fiveDigit': "meterReading"
},      
groups:{
    'meter_reading': "oneDigit twoDigit threeDigit fourDigit fiveDigit"
}

请指教。

Answer 1

您可以使用 jQuery 事件处理程序：

$( "#target" ).focus(function() {
  /** Your code here **/
});

有关焦点事件处理程序的更多信息：https://api.jquery.com/focus/

$( "#target" ).focusout(function() {
  /** Your code here **/
});

有关 focusout 事件处理程序的更多信息：https://api.jquery.com/focusout/

并使用.valid()方法进行jQuery验证插件https://jqueryvalidation.org/valid/

Answer 2

您可以将 jQuery event focusOut 与验证方法 .valid（） 一起使用。

在您的情况下，它将是：

$(".fiveDigit").on('focusout', function() {
        $(".accountNumberWrapper input").valid();
    }
);

Answer 3

我只想验证第五个盒子focusout上的帐号

编写一个自定义focusout处理程序，该处理程序在第五个框的 focusout 事件上触发整个窗体的验证测试。

$('[name="fiveDigit"]').on('focusout', function() {
    $('#myform').valid();  // trigger validation of form
});

但它正在每个盒子的选项卡上进行验证

还要禁用插件的默认onfocusout选项，以便在字段之间移动时不会触发验证。

onfocusout: false

演示：jsfiddle.net/6mqtqeos/