在jQuery中重复代码

时间:2016-03-19 19:16:01

标签: javascript jquery

我是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事件,如果可能的话。

4 个答案:

答案 0 :(得分: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,}$/);};

答案 1 :(得分:0)

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

答案 2 :(得分:0)

您可以考虑使用Jquery验证插件进行表单验证。 就你的代码而言,你可以做一些这样的事情......

public boolean remove(E e) {
final int index = indexOf(e);
if (index >= 0) {
    remove(index);
    return true;
} else {
    return false;
}}

答案 3 :(得分: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);
});

};