Question

我正在练习制作自己的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" />

当然，我确定validate标签会有更多选项。

这是我的插件的开始：

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

    });
};
})(jQuery);

这是我感到困惑的地方。当按下“提交”按钮时，或者基本上在提交表单时，该插件意味着它是神奇的。

之前我使用过这样的代码： $（“form.someform”）。submit（function（）{/ *做什么* /}）; 所以我希望这是我在插件中需要做的事情。

对于任何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错误控制台中出现“未定义的alertElements”错误。我也担心我没有在插件中正确使用$（this）。当我通过表单输入循环时，我发现自己使用$（this）来捕获任何“validate”属性。这是我应该如何编码吗？

Answer 1

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

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

将所有内容包装在一起（function（$）{...}）（jQuery）;

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

jQuery自定义插件语法

1 个答案: