如何在 jQuery 的验证插件中延迟 onkeyup 事件答案

【问题标题】：How to delay onkeyup event in jQuery's validation plugin如何在 jQuery 的验证插件中延迟 onkeyup 事件
【发布时间】：2015-01-11 08:13:21
【问题描述】：

我有一个使用 jQuery 验证插件来验证其字段的表单。在这些字段之一中，验证将由 ajax 完成。问题是每次击键都会触发这个验证规则，因此会进行 ajax 调用，这是我不想要的。现在我可以禁用该字段的 onkeyup，但我希望在用户键入后延迟 5 秒，然后调用包含 ajax 方法的自定义规则。

我已经搜索了一段时间，发现了这个How to delay the .keyup() handler until the user stops typing?，但不知道如何将它与验证插件一起使用。有人可以帮我解决这个问题吗？

jQuery.validator.addMethod("ruleName", function(value, element) {
   // AJAX call here to validate value
});

jQuery('form').validate({
   onkeyup: function(element) {
   // Do I do something here ?
   },
   rules: {
      name: {
      required: true,
      ruleName: true
     }
  }
});

【问题讨论】：

.ajax() 验证使用built-in remote rule 可能会更好。通常，您会根据字段有条件地禁用onkeyup 选项，而不是使用延迟。但是，“是的”，你会在那里放一些东西......你试过什么？
内置remote 规则没有引用输入元素本身。所以如果你最好使用addMethod 结构。

标签： jquery ajax validation jquery-validate

【解决方案1】：

您可以更改 onkeyup 函数，但这会影响表单中的所有字段，因此您要么在每个字段中都有延迟，要么没有延迟。

在 jquery.validate.js 中，默认的 onkeyup 函数为

onkeyup: function( element, event ) {

            // Avoid revalidate the field when pressing one of the following keys
            // Shift       => 16
            // Ctrl        => 17
            // Alt         => 18
            // Caps lock   => 20
            // End         => 35
            // Home        => 36
            // Left arrow  => 37
            // Up arrow    => 38
            // Right arrow => 39
            // Down arrow  => 40
            // Insert      => 45
            // Num lock    => 144
            // AltGr key   => 225
            var excludedKeys = [
                16, 17, 18, 20, 35, 36, 37,
                38, 39, 40, 45, 144, 225
            ];

            if ( event.which === 9 && this.elementValue( element ) === "" || $.inArray( event.keyCode, excludedKeys ) !== -1 ) {
                // Do nothing
                return;
            } else if ( element.name in this.submitted || element.name in this.invalid ) {
                // Start validation
                this.element( element );
            }
        },

如果您想在验证之前添加延迟，您需要将代码更改为

var delay = (function(){
   var timer = 0;
   return function(callback, ms){
     clearTimeout (timer);
     timer = setTimeout(callback, ms);
   };
  })();

jQuery('form').validate({
   onkeyup: onkeyup: function( element, event ) {

            // Avoid revalidate the field when pressing one of the following keys
            // Shift       => 16
            // Ctrl        => 17
            // Alt         => 18
            // Caps lock   => 20
            // End         => 35
            // Home        => 36
            // Left arrow  => 37
            // Up arrow    => 38
            // Right arrow => 39
            // Down arrow  => 40
            // Insert      => 45
            // Num lock    => 144
            // AltGr key   => 225
            var excludedKeys = [
                16, 17, 18, 20, 35, 36, 37,
                38, 39, 40, 45, 144, 225
            ];

            if ( event.which === 9 && this.elementValue( element ) === "" || $.inArray( event.keyCode, excludedKeys ) !== -1 ) {
                return;
            } else if ( element.name in this.submitted || element.name in this.invalid ) {

          // Here is the part where the delay is added. 
          // In this example, the delay time is 1000ms.
          var temp_obj = this;
          delay(function(){
            temp_obj.element( element );
          }, 1000);

            }
        },
   rules: {
      name: {
      required: true,
      ruleName: true
     }
  }
});

【讨论】：