Question

我写了一个简单的插件来验证需要数字的输入字段是否确实是数字。

插件可以成功加载和触发，但它没有做任何事情。但是，如果我手动输入$（selector）.validateNum（）;在控制台中，它完美运行。谁知道为什么？

请检查此jsBin的实时版本：

jsBin：http://jsbin.com/tusunuweto/1/edit?html,js,console,output

以下代码：

  $.fn.validateNum = function () {
    console.log('validation started');
    var numInputFields = this.find('input.number');

    $(numInputFields).each(function () {
      if ( isNaN( Number( $(this).val() ) ) ) {
        $(this).keyup(function () {
          alert("This field must be a number");
        });
      }
    });
  };

在我的index.html文件中：

<script type="text/javascript">

  $(function() {
    $('#selector').validateNum();
  });

</script>

Answer 1

您需要将isNaN检查移动到点击处理程序中，我还添加了一个正则表达式来删除非数字。

这很有效，但是如果您想进行这样的验证，您可能需要查看像.validate这样的库

 $(function () {

     $.fn.validateNum = function () {
         console.log('validation started');
         var numInputFields = this.find('input.number');
         $(numInputFields).each(function () {
             $(this).keyup(function () { // you need to move your isNaN check into the click handler
                 if (isNaN(Number($(this).val()))) {
                     $(this).val( $(this).val().replace(/[^0-9.]/g, "") ); // added this to remove non-numbers
                     alert("This field must be a number");
                 }
             });
         });
     };
     
     $(".testPlugin").validateNum();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testPlugin">
<input class="number" />

Answer 2

我看到的几个问题

您没有正确链接

这本身并不坏（因为.find确实按照您使用它的方式工作）但它可以更明确。例如，如果您致电$(".foo, .bar").validateNum()，则应该清楚它会在每个所选元素中找到输入

您会在其他社区插件中看到这种模式

$.fn.myPlugin = function() {
  // `this` is the jQuery object that matches the selected elements

  // don't forget `return` to make your plugin chainable
  return this.each(function() {
    // iterate through the selected elements performing some operation
  });
};

但是！正如您接下来看到的那样，我们根本不需要使用.find！

您未使用事件委派

您将.keyup侦听器专门绑定到每个输入。如果您的网页上有大量输入，则可能会占用大量资源。

此方法使用委派，因此您不会将侦听器绑定到每个输入

$.fn.validateNum = function() {
  console.log("validation started");
  return this.each(function() {
    $(this).on("keyup", ".number", function(event) {
      var num = parseInt($(this).val(), 10);
      if (isNaN(num)) {
        alert("This field must be a number");
      }
    });
  });
};

$(".testPlugin").validateNum();

自制的jQuery插件已触发但无法正常工作

2 个答案: