2016-03-19 74 views
0

我是JS和jQuery的新手,我不喜欢一遍又一遍地重写代码或函数。这里是我的代码:在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函数和模糊事件。

回答

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,}$/);}; 
+0

是的,我也是这么想的,我发现了一个验证器jquery bootstrap,但作为即时新的js,我想这对我来说更好,通过我自己编码来学习 –

0

我相信避免额外代码的最佳方法是重用已经创建和测试一段时间的内容。看看jQuery验证插件,它提供了很多默认的验证方法,并可自行定制 - http://jqueryvalidation.org/

0

您可以考虑使用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"); 
      }; 
    } 
0

到底在哪儿有重复的代码,创建一个名为函数接受参数。然后调用传递数据的函数。沿线的东西:

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); 
}); 

};