Javascript Jquery缩短代码

我以前也发过类似的问题，但我还是发现自己愚蠢地复制和粘贴代码

有没有我可以结合以下几点，我肯定有。。请帮忙。。我正在学习过程中

看，我有以下几点：

$(document).on('blur', 'input.email', function() {
    validate_Email_Input(this);
});

$(document).on('blur', 'input.id', function() {
    validate_Id_Input(this);
});

$(document).on('blur', 'input.pass', function() {
    validate_Pass_Input(this);
});

$(document).on('blur', 'input.town', function() {
    validate_Town_Input(this);
});

$(document).on('blur', 'input.relation', function() {
    validate_Relation_Input(this);
});

$(document).on('blur', 'input.contact', function() {
    validate_Relation_Input(this);
});

对于所有这些，我有单独的函数，这里有一个例子：

function validate_Email_Input(el) {
    var $this = $(el);
    var input_groups = $this.parent();
    var isValid = true;
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
        }).join('');
        isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent());
    });
    return isValid;
}   

我真的很想学习如何编写高效的代码，非常感谢任何帮助

我不知道这是否有帮助。但我要做的是验证所有内容，并为每个特定字段弹出消息。这是我在jQuery中的第一个非常大的项目，我想我也可以向大家展示我的工作：

---

有效ID示例：85 0929 5266086

您可以创建一个对象，将每个字段选择器映射到其验证器函数，并从单个事件处理程序中循环：

$(document).on('blur', function(e) {
    var validators = {
        'input.email' : validate_Email_Input,
        'input.id' : validate_Id_Input
        // etc
    };
    for(var field in validators) {
        if($(e.target).is(field)) {
            validators['field'](e.target);
        }
    }
}

---

这应该与您的第一块代码完全相同：

$(document)
.on('blur', 'input.email', validate_Email_Input)
.on('blur', 'input.id', validate_Id_Input)
.on('blur', 'input.pass', validate_Pass_Input)
.on('blur', 'input.town', validate_Town_Input)
.on('blur', 'input.relation', validate_Relation_Input)
.on('blur', 'input.contact', validate_Relation_Input);

编辑：评论家伊恩是对的。为了使其工作，您需要将第二个代码块更改为：

function validate_Email_Input() {
    var $this = $(this); // This line has changed
    var input_groups = $this.parent();
    var isValid = true;
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
        }).join('');
        isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent());
    });
    return isValid;
}

这里有一种方法。 首先为所有html元素提供一个公共类，并为值类型使用数据属性

<input type="text" class="validate" data-value-type="town" />

---

要重构它，您可以创建一个模型：

var myInputsModel = [
    { a: 'input.email' }, // you can store all the information you want in the model...
    { a: 'input.id' },
    etc...
];

因此，对于所有这些函数，只有一个函数：

$.each(myInputsModel, function(i, v) {
    $(document).on('blur', v.a, function() {
        // One function for all of them.
        mySingleFunction(this);
    });
});


function mySingleFunction(el) {
    var $this = $(el);
    var input_groups = $this.parent();
    var isValid = true;
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
        }).join('');
        isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent());
    });
    return isValid;
}  

---

+因为我不想成为一名程序员，因为他的代码最终会在！问这些问题会更好。+1@simon andre forsberg，感谢你引导我访问codecrap.com@SimonAndréForsberg Thx对于这个不错的网站，你可以选择任意数量的答案。如果有很多答案是正确的，那就选一个你最喜欢的，或者教你最多的。没有人会被冒犯。不，不应该。回调的第一个参数不是

this

，而是

事件
这个
只是在回调函数内部设置的，它们正在将它传递给函数。还有多个回调函数。重点是减少代码，而不是几行…你完全正确。我编辑了我的答案以确保正确。我不知道它是否需要进一步减少。在这种状态下，它不应该很慢，而且可读性很强。我只想说验证代码需要一些注释，因为我无法一眼看出它的作用。而且（正如我在另一条注释中指出的）没有关于使用更少的验证函数的说法。我们不知道其他验证函数是否具有相同的实体，所以我们不能假设。不，你绝对是对的。如果你看一下OP的JSFIDLE，肯定没有办法减少验证函数，因为它们是如此的不同，如此的好。。。用户希望避免它…这在问题中并不清楚，我不确定。你怎么能让同样的功能同时验证电子邮件和电话号码呢？他们只是要求减少使用
on（）
的行数。我同意，他们可能有充分的理由拥有独立的职能。问题中没有关于验证函数更少的词。我们必须看到其他函数，才能判断它们是否可以简化。如果你们仍然热衷于此，我很想了解：这很接近，但我不认为每个值都应该通过
validate\u Email
（内部
mySingleFunction
）。您可能会在
myInputsModel
中存储一个引用，并将其传递给
mySingleFunction
…然后调用它，而不是总是调用
validate\u Email
。这有意义吗？哦，耶，我没看到那里也有电子邮件。。。所以我认为他还需要一个内部函数来正确地验证所有的东西。或者可能只是一个足够的控件。。。但这是一个非常深刻的重构。稍微操纵一下它可能正是用户想要的。
$.each(myInputsModel, function(i, v) {
    $(document).on('blur', v.a, function() {
        // One function for all of them.
        mySingleFunction(this);
    });
});


function mySingleFunction(el) {
    var $this = $(el);
    var input_groups = $this.parent();
    var isValid = true;
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
        }).join('');
        isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent());
    });
    return isValid;
}  

$("#my_form").submit(function(e){
    var valid = 1;
    var error_msg = "";
    //validate fields here, if fails set valid to 0 and error_msg to whatever
    if(!valid){
      e.preventDefault();
      alert(error_msg);
    }
});