1

いくつかの検証ライブラリを使用した後、どのライブラリも希望どおりに動作しなかったため、最終的に自分の実装をロールすることにしました。以下のコードは正常に機能しますが、あまり慣用的ではないと思います。関数本体は巨大であり、おそらく小さなチャンクにリファクタリングする必要があります。

コードを改善する方法はたくさんあると思いますが、コードを理解しやすくするために、大きな関数を小さな関数に分割する方法について具体的なアドバイスを求めています。明らかに、私はもっと多くの検証関数を追加したいと思っています、そして私はたくさんのスパゲッティを作りたくありません。

検証はblur要素に対して行う必要があります。を挿入および削除することによりdiv、ユーザーに問題が通知されます。

検証機能：

(function($) {
  $.fn.extend({
    live_validate: function() {
      return this.each(function() {

        var inputs = $('input', $(this));

        inputs.blur(function() {
          var el = $(this);
          el.siblings('div.feedback').remove();

          if(el.hasAttr('required') && el.val() == '') {
            el.after('<div class="feedback feedback-error">must be present</div>');
            return;
          }    

          if(el.hasAttr('minlength') && el.val().length < el.attr('minlength')) {
            el.after('<div class="feedback feedback-error">is too small</div>');
            return;
          }

          // no validation returned; all good.
          el.filter(":visible").after('<div class="feedback feedback-ok"></div>');

        });

      });
    }
  });
})(jQuery);

これは、属性が存在するかどうかを確認するために作成したクイックヘルパーです。属性が存在するかどうかを知る必要があります。これを行うためのより良い方法はありますか？

$.fn.hasAttr = function(name) {
   return (this.attr(name) !== undefined && this.attr(name) !== false);
};

最後に、必要なフォームでバリデーターを呼び出します。

$(document).ready(function() {

    $("form.new_user").live_validate();

}
4

1 に答える 1

0

各バリデーターを独自の関数で分離し、各ロジックを別の関数で分離します。

(function($) {
  var validators = {
    required: function(el) {
        // Validation code...
    },
    minlength: function(el) {
        // Validation code...
    } // you can add more validators here..
  };
  $.fn.extend({
    live_validate: function(enabledValidators) {
      return this.each(function() {

        var inputs = $('input', $(this));

        inputs.blur(function() {
          var el = $(this);
          el.siblings('div.feedback').remove();
          var hasErrors = false;

          $(enabledValidators).each(function() {
             var result = validators[this](el);
             if(result !== true) {
               el.after('<div class="feedback feedback-error">' + result + '</div>');
               hasErrors = true;
             }
          });

          if(!hasErrors) {
            el.filter(":visible").after('<div class="feedback feedback-ok"></div>');
          }
        });
      });
    }
  });
})(jQuery);

ここで行ったことは、各検証を独自の機能にカプセル化することでした。常にde要素を受け取り、有効な場合はtrueを返し、無効な場合はエラーのある文字列を返します。また、実行するバリデーターを渡すことができるように、enabledValidatorsを追加しました（これを削除して、必要に応じてすべてのバリデーターを常に実行するか、何も渡されなかった場合にのみすべてのバリデーターを使用できます）。だからあなたはそれをこのように呼ぶでしょう：

$(document).ready(function() {
    $("form.new_user").live_validate(["required", "minlength"]);
}
于 2012-06-28T15:40:36.880 に答える