2

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

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

看到我有以下内容：

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

4

5 回答 5

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);
        }
    }
}
于 2013-01-22T15:32:12.483 回答
1

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

$(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;
}
于 2013-01-22T15:34:29.633 回答
0

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

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;
}
于 2013-01-22T15:38:38.430 回答
0 
$("#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);
    }
});
于 2013-01-22T15:46:29.910 回答
-1

这是一种方法。首先为所有 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));
}
于 2013-01-22T15:37:35.387 回答