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>

这就是我感到困惑的地方。 当按下Submit按钮时，或者基本上当表单被提交时，插件就可以发挥神奇的作用

我以前使用过这样的代码： $（“form.someform”）.submit（函数（）{/*执行任何操作*/}）； 所以我希望这就是我在插件中需要做的

这对任何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）捕获任何“验证”属性。我应该这样编码吗？

我会基于实例进行编码。通过这种方式，每个表单都有自己的选项

$.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);
});
}

此代码使您能够实例化插件并将其自身保存到调用它的元素中。一旦创建了它，就需要这样的实例代码

var formValidationInstance = function (element, options) {
var elem = $(element);
var obj = this;

//default options
var defaults = {
        youroption : "defaultval"
}


// Merge options with defaults
var settings = $.extend(defaults, options || {});

this.settings = settings;

// Private method   
var init = function (elem, settings) {
          //do your init stuff here
    }

    // Public method
    obj.otherfunc = function() {            
          //do your other stuff here using 'elem' element.
    }

    var assignevent = function() {

         //assigning event is a little bit trickier
         // if sometimes you need to rebind your event, first unbind your previous one to prevent multiple executions.

         elem.unbind("submit").bind("submit",function(){

             //this event is out of this class scope, to get this inner methods first we need to reach its instance.

             var instance = $(this).data("formValidation");
             if (instance){
                   // if we got the instance saved inside this element, we can use it now
                   instance.otherfunc();  // Calling an public function. private won't work here.
             }
         });
    }


// init our plugin first:

init();
}

并将其全部封装在（函数（$）{…}）（jQuery）中

---

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

$（这）不是div，因为您正在调用attr（）函数返回的字符串上的each。您的插件看起来很糟糕：| 1

此
内部
$.fn.xxxx
已经是jQuery对象。2.你的插件只允许一次使用。
alertElements
永远不会重置为空字符串（无论如何，它应该在
submit
中声明）。它接受文档中的所有输入元素，但不包括减少输入元素集的选项。-->你的插件不是很容易移植。
$.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);
});
}

var formValidationInstance = function (element, options) {
var elem = $(element);
var obj = this;

//default options
var defaults = {
        youroption : "defaultval"
}


// Merge options with defaults
var settings = $.extend(defaults, options || {});

this.settings = settings;

// Private method   
var init = function (elem, settings) {
          //do your init stuff here
    }

    // Public method
    obj.otherfunc = function() {            
          //do your other stuff here using 'elem' element.
    }

    var assignevent = function() {

         //assigning event is a little bit trickier
         // if sometimes you need to rebind your event, first unbind your previous one to prevent multiple executions.

         elem.unbind("submit").bind("submit",function(){

             //this event is out of this class scope, to get this inner methods first we need to reach its instance.

             var instance = $(this).data("formValidation");
             if (instance){
                   // if we got the instance saved inside this element, we can use it now
                   instance.otherfunc();  // Calling an public function. private won't work here.
             }
         });
    }


// init our plugin first:

init();
}