jQueryの繰り返しコード

Question

私はJSとjQueryの初心者です。コードや関数を何度も何度も書き直したくありません。ここに私のコード：

var validarN= function(){ 
    $("#username").blur(function(){ 
     var valor= $(this).val(); 
     var regex= /^[\w]{4,12}$/; 
     if (valor.match(regex)) { 
      $(this).closest(".form-group").removeClass("has-error");; 
      $(this).closest(".form-group").addClass("has-success"); 
     } else { 
      $(this).closest(".form-group").addClass("has-error"); 
     }; 


    }); 
}; 

var validarPw = function(){ 
    $("#pass").blur(function(){ 
     var varlor, regex 
     valor= $(this).val() 
     regex= /(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{6,}$/; 
     if (valor.match(regex)) { 
      $(this).closest(".form-group").removeClass("has-error"); 
      $(this).closest(".form-group").addClass("has-success"); 
     } else { 
      $(this).closest(".form-group").addClass("has-error"); 
     }; 
    }); 
}; 
var confirmarPw= function() { 
    $("#passV").blur(function() { 
     var valor= $(this).val(); 
     var valorP= $("#pass").val(); 
     regex= /(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{6,}$/; 
     if (valor.match(regex) && valor==valorP) { 
      $(this).closest(".form-group").removeClass("has-error"); 
      $(this).closest(".form-group").addClass("has-success"); 
     } else { 
      $(this).closest(".form-group").addClass("has-error"); 
     }; 
    }); 
} 

私はフォームの検証をしています。可能であれば、jQuery関数とblurイベントをカプセル化するフォームも必要です。

Answer 1

私はikryvorotenkoが言うことをサポートすることができますが、場合には、あなたが

var validate = function(sel,regex){ 
    $(sel).blur(function(){ 
     var varlor $(this).val() 
     if (valor.match(regex)) { 
      $(this).closest(".form-group").removeClass("has-error"); 
      $(this).closest(".form-group").addClass("has-success"); 
     } else { 
      $(this).closest(".form-group").addClass("has-error"); 
     }; 
    }); 
}; 

を行うことができ、独自の機能を継続したいです

と、これまでのコードが繰り返され、その後

var validarN=function(){validate("#username",/^[\w]{4,12}$/);}, 
    validarPw=function(){validate("#pass",/(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{6,}$/);}, 
    confirmarPw=function(){validate("#passV",/(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{6,}$/);}; 

Answer 2

私は、余分なコードを避ける最善の方法は、すでに作成されテストされているものを再利用することだと考えています。 http://jqueryvalidation.org/

Answer 3

フォームバリデーションのためにJqueryバリデーションプラグインを使用することを検討してください。 限りあなたのコードが行くように、あなたはこのようないくつかのことを行うことができます。..

var validarN= function(){ 
     $("#username").blur(function(){ 
      var regex= /^[\w]{4,12}$/; 
      processRequest(this,regex); 
    }); 
    }; 

    function processRequest(ctrl, regex){ 
      var valor= $(ctrl).val(); 
      var formGroup = $(ctrl).closest(".form-group"); 
      if (valor.match(regex)) { 
       $(formGroup).removeClass("has-error"); 
       $(formGroup).addClass("has-success"); 
      } else { 
       $(formGroup).addClass("has-error"); 
      }; 
    } 

Answer 4

、引数を取るという名前の関数を作成します。次に、データを渡す関数を呼び出します。

function validateField(field, regex) { 
    if (field.match(regex)) { 
     $(field).closest(".form-group").removeClass("has-error");; 
     $(field).closest(".form-group").addClass("has-success"); 
    } else { 
     $(field).closest(".form-group").addClass("has-error"); 
    }; 
} 

var validarN = function(){ 
    var valor= $(this).val(); 
    var regex= /^[\w]{4,12}$/; 
    validateField(field, regex); 
}); 

}の行に沿って何か：