1

我写了一个验证表单的初学者 jQuery 插件。

如果此 jQuery 插件留空或无法通过我的正则表达式测试，则此 jQuery 插件会在验证元素下显示错误。

现在，如果表单有错误，我想从我的插件中返回 true 或 false 以禁用提交按钮。

问题是：我可以这样做并保持插件的可链性吗？

我有这样的事情：

$("input[type='text']").change(this.mytextboxvalidator(
{'regex':'something','message':'somethingelse'}));
4

3 回答 3

2

编辑：

你可以这样做，但它有点争议:)

不，你不能。您应该做的是编写插件，使其绑定到选择器的更改事件。

在插件内部，您这样做是为了绑定到更改事件：

...
$(this).bind('change', function () {
    //validation logic
});
...    
return this;

你像这样使用插件：

$("input[text='text']").mytextvalidator({'regex':'something','message':'somethingelse'});
于 2012-03-03T19:30:03.193 回答
2

我在这里看到了很多误解。

首先，您不是在编写 jQuery 插件。一个 jQuery 插件是这样使用的：

jQuery( ".someSelector" ).myPluginName();

您，您正在使用mytextboxvalidator传递给 jQuery 函数的方法$.fn.change。

其次，正如 Sparky672 所说，你真的应该考虑使用已经存在的 jQuery 进行表单验证，那里有很多，只是谷歌它。

第三，由于我是个好人，我会尽力帮助您使用您的插件。

// myFormValidationPlugin is the name of your plugin, change it as you want
$.fn.myFormValidationPlugin = function( options ) {

    // bind the event inside the plugin
    this.change(function( ev ) {
        // doing some BASIC verification
        if( options.pattern.test( $(this).val() ) {
            // input is valid
            // in your example, I guess it's here you want to return TRUE
        }
        else {
            // input is invalid
            // in your example, I guess it's here you want to return FALSE
        }
    });


    // NEVER break the chain
    // so yes, you can maintain chainability
    return this;
};

// usage
$( ".someSelector" ).myFormValidationPlugin({
    pattern: /foo/
});

我希望这将有所帮助。但是，除此之外，此代码不会像您一样工作。为了使它工作，你应该：

  1. 将事件绑定到submit表单的事件
  2. 在处理程序中，检查每个元素是否具有有效值
  3. 如果所有元素都有效，则执行提交
  4. 如果一个或多个无效，则禁用该事件，例如event.preventDefault调用
于 2012-03-03T20:38:10.797 回答
1

当您保持可链性时，您会返回一个 jQuery 对象。它是一个对象，所以只需在存储布尔值的对象中添加一个属性：

(function( $ ){

  $.fn.someMethod = function(  ) {  

    var bln=true;
    return (this.each(function() {
      //modify boolean when needed
      bln=false;
    }).extend({myBoolean:bln}));

  };
})( jQuery );

用法：

if(!$('someselector').someMethod().myBoolean)
 {
  //disable the button 
 }
于 2012-03-03T19:56:10.917 回答