jQuery自定义插件语法

我正在练习制作我自己的jquery插件。我可以制作简单的插件，但现在我变得更加复杂。jQuery自定义插件语法

我想创建一个插件来侦听表单的提交，并验证所有的输入。我知道那里有几个插件已经做了我想做的事情，但我现在有兴趣自己学习它。

这里是我的简单形式：

<form id="testform">   
<table> 
    <tr> 
     <td>First Name:</td> 
     <td><input type="text" name="fname" id="fname" /></td> 
    </tr> 
    <tr> 
     <td>Email:</td> 
     <td><input type="text" name="email" id="email" /></td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td><input type="submit" name="button" value="Validate" /></td> 
    </tr> 
</table> 
</form> 
<script language="javascript" type="text/javascript"> 
    $(document).ready(function(){ 
    $("#testform").validateMyForm(); 
    }); 
</script>

对我来说，这是香草味到我的表单元素。我没有添加任何类到输入，而不是其他元数据。但是，我打算使用不是典型的元数据，并且属于我未来的表单验证插件。

例子：

<input type="text" name="fname" id="fname" validate="min:2,max55,msg:Invalid First Name" />

当然，我敢肯定，验证标签将有更多的选择。

这里是我的插件开始：

(function($) { 
$.fn.validateMyForm = function(options){ 
    // settings defaults 
    var settings = $.extend({'addclasstoinput':''}, options); 
    return this.each(function(){ 

    }); 
}; 
})(jQuery);

此处，我感到困惑。这个插件意味着当提交按钮被按下时，或者当提交表单时基本上是这样做的。

我已经使用过这样的代码： $（“form.someform”）。submit（function（）{/ * do whatever * /}）; 所以我期待这是我需要做的插件。

这看起来对任何jquery插件退伍军人都是正确的吗？

(function($) { 
$.fn.validateMyForm = function(options){ 

    // settings defaults 
    var settings = $.extend({'addclasstoinput':''}, options); 

    var alertElements = ''; 
    $(this).submit(function(){ 

     $('input').attr("validate").each(function() { 
      // `this` is the div 
      alertElements += $(this).attr("validate"); 
      alertElements += '\n'; 
     }); 
     alert(alertElements); // let's get a popup of the detected tags 

    }); 

}; 
})(jQuery);

到目前为止，我在FF错误控制台中收到“undefined alertElements”错误。我也担心我没有正确使用插件内的$（this）。当我通过表单输入循环时，我看到自己使用$（this）来捕获任何“验证”属性。这是我应该如何编码它？

来源

2012-03-18 coffeemonitor

$（this）不是div，因为你正在调用attr（）函数返回的字符串。 – 2012-03-18 21:08:11

你的插件看起来很凄惨：| 1.'this.'里面的$ .fn.xxxx'已经是一个jQuery对象。 2.你的插件只允许使用一次。 'alertElements'永远不会被重置为一个空字符串（无论如何它应该在'submit'中声明）。它采用文档中的所有输入元素，而不包括减少输入元素集的选项。 - >你的插件不是很便携。 – 2012-03-18 21:10:24

我会去那里的实例。每种形式都可以通过这种方式拥有自己的选择。

$.fn.formValidation = function (options) { 
return this.each(function() { 
    var element = $(this); 
    if (element.data('formValidation')) return; 
    var formValidation = new formValidationInstance(this, options); 
    element.data('formValidation', formValidation); 
}); 
}

此代码为您提供了实例化插件，本身保存到它已经从被称为元素的能力。一旦你创建了这个，你需要一个像这样的实例代码。（函数（$）{...}）（jQuery）;

这是我在创建基于实例的插件时使用的。

来源

2012-03-18 21:37:44

jQuery自定义插件语法

回答

相关问题