1

フォームを検証する初心者の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を使用することを検討する必要があります。そこには、Googleだけでなくたくさんの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. 1つ以上が無効な場合は、たとえば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 に答える