Question

我之前发过一个类似的问题，但我再次发现我的自我愚蠢地复制和粘贴代码。

无论如何我可以结合以下内容，我确定有..请帮助..我在学习过程中。

见我有以下内容：

$(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中的第一个非常重要的项目，我想我也可以向你展示我正在做的工作：http://jsfiddle.net/dawidvdh/36BLm/

有效身份证件的样本：85 0929 5266086

Answer 1

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

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

Answer 2

这应该与第一段代码完全相同：

$(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;
}

Answer 3

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

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

Answer 4

$("#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);
    }
});

Answer 5

这是一种方法。首先给所有html元素一个公共类，并使用值类型

的数据属性

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

示例jQuery + javascript

// Make an object matching strings to functions
var functionMap = {
  email: emailFunction(),
  id: idFunction(),
  pass: passFunction(),
  town: townFunction,
  relation: relationFunction(),
  contact: contactFunction
}
function validate(element){
  // see if the attribute being checked against has a matching entry in functionMap
  if(functionMap[element.data('value-type')] !== undefined){
    // call the function if it's there
    functionMap[element.data('value-type')];
  }
}

$(document).on('blur', '.validate', function(){
  validate($(this));
}

Jquery缩短代码

5 个答案: