Question

我有一个使用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
     }
  }
});

Answer 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
     }
  }
});

如何在jQuery验证插件中延迟keyup事件

1 个答案: