javascript - 重复输入基本验证

Question

我一直试图问这个问题，但我的代码太长等等，我会再试一次。

不幸的是，我无法总结代码，但我只是想知道我有大约 4 个返回 true 或 false 的验证函数，例如:

//Basic validation
    function validate_Email(email_values){
        var email_reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if(email_reg.test(email_values) == false) {
            console.log('invalid email');
            return false;
        } else {
            console.log('valid email');
            return true;
        };
    };

    function validate_Cell(cell_values){
        if (cell_values.toString().length != 10) {
            return false;
            console.log('invalid cell');
        }else if (cell_values.toString().length = 10) {
            return true;
            console.log('valid cell');
        };
    };

    function validate_Pass(pass_values){
        if (pass_values.toString().length != 13) {
            console.log($(pass_values).toString().length);
            console.log(pass_values);
            return false;
            console.log('invalid passport');
        }else if (pass_values.toString().length = 13) {
            console.log(pass_values);
            return true;
            console.log('valid passport');
        };
    };

    function validate_Code(code_values){
        if (code_values.toString().length != 4) {
            console.log($(code_values).toString().length);
            console.log(code_values);
            return false;
            console.log('invalid passport');
        }else if (code_values.toString().length = 4) {
            console.log(code_values);
            return true;
            console.log('valid codes');
        };
    };
//Basic Validation

以下是如何验证电子邮件的示例:

$(document).on('blur', 'input.email', function() {
    var $this = $(this);
    var input_groups = $this.parent();
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
            }).join('');
            validate_Email(email_values, input_groups.parent().parent().parent());
        });
    });

我还有一些其他更复杂的验证，它们返回 true 或 false。我只是想知道如果有错误如何不发送。

以下是我获取和发送数据的方式:

//Get Field Values
var result = {};
var dependants;
var mainmember;
var dep_counter = 0;
function getValues(){
    jQuery('div[class*="mainmember"]').each(function(k, v){
        mainmember = {};
        mainmember['name'] = $(v).find('.main_name').val();
        mainmember['surname'] = $(v).find('.main_surname').val();
        mainmember['id'] = ''; 
        $(v).find('.id').each(function(){
          mainmember['id'] += $(this).val(); 
        });
        mainmember['age'] = ''; 
        $(v).find('.age').each(function(){
          mainmember['age'] += $(this).val(); 
        });
        mainmember['gender'] = $(v).find('.gender').val();
        mainmember['townofbirth'] = $(v).find('.main_town').val();
        mainmember['email'] = $(v).find('.email').val();
        mainmember['contact'] = ''; 
        $(v).find('.cell').each(function(){
        mainmember['contact'] += $(this).val(); 
        });
        mainmember['passport'] = ''; 
        $(v).find('.pass').each(function(){
          mainmember['passport'] += $(this).val(); 
        });
        mainmember['postal'] = $(v).find('.main_postaladdress').val();

        mainmember['residential_code'] = ''; 
        $(v).find('.res_code').each(function(){
          mainmember['residential_code'] += $(this).val(); 
        });

        mainmember['postal_code'] = ''; 
        $(v).find('.post_code').each(function(){
          mainmember['postal_code'] += $(this).val(); 
        });

        mainmember['residential'] = $(v).find('.main_residential').val();
        result['mainmember'] = mainmember;
    });

    result['dependants'] = [];
    jQuery('div[class*="dependant"]').each(function(k, v){
        dep_counter++
        dependants = {};
        dependants['name'] = $(v).find('.name').val();
        dependants['surname'] = $(v).find('.surname').val();

        dependants['id'] = ''; 
        $(v).find('.id').each(function(){
          dependants['id'] += $(this).val(); 
        });

        dependants['age'] = ''; 
        $(v).find('.age').each(function(){
          dependants['age'] += $(this).val(); 
        });

        dependants['gender'] = $(v).find('.gender').val();
        dependants['townofbirth'] = $(v).find('.town').val();

        dependants['cell'] = '';
        $(v).find('.cell').each(function(){
          dependants['cell'] += $(this).val(); 
        });

        dependants['email'] = $(v).find('.email').val();

        dependants['passport'] = '';
        $(v).find('.pass').each(function(){
          dependants['passport'] += $(this).val(); 
        });

        dependants['relationship'] = $(v).find('.relationship:checked').val();
        result['dependants'].push(dependants);
    });
};
//Get Field Values

//submit function
jQuery('#submit').click(function(){
    getValues();
    var jsonData = JSON.stringify(result);
    jQuery.ajax({
        type: "POST",
        url: "mail.php",
        dataType: "json",
        beforeSend: function() {
        },
        data: {parameters: jsonData}
    });
    console.log('Sending error');
    console.log(jsonData);
});
//submit function

这是完整的代码(警告代码很多):http://jsfiddle.net/dawidvdh/tphjh/

非常感谢任何帮助。 :)

Answer 1

编辑 1

使用更新后的代码，我的建议是在用户尝试提交表单时调用相同的验证逻辑。当出现问题时，您需要向用户指示，即用红色背景突出显示输入，或者显示错误弹出窗口等。

例如，目前用于验证电子邮件的代码仅在用户单击他们输入的电子邮件输入框时运行:

$(document).on('blur', 'input.email', function() {
    var $this = $(this);
    var input_groups = $this.parent();
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
        }).join('');
        validate_Email(email_values, input_groups.parent().parent().parent());
    });
});

首先，我会将此逻辑重构为一个单独的方法，该方法可以在表单输入期间发生的实时验证和您将在表单提交期间添加的验证之间共享和重用:

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

然后您的实时电子邮件验证将转换为:

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

您可以在 submit 函数中运行相同的验证逻辑，如下所示:

var isValid = true;

$('input.email').each(function(i, el) {
    isValid = isValid &&
        validate_Email_Input(el);
});

在这里，我对所有电子邮件输入进行相同的验证，并根据是否所有电子邮件输入都有效来设置字段 isValid 的值。您可以通过运行相同的命令将相同的格式应用于所有其他 on('blur'...) 或 on('keyup'...) 验证函数表单提交期间的验证逻辑。然后使用我在下面介绍的相同想法，仅在所有验证通过时才提交表单。

带有电子邮件验证的演示:http://jsfiddle.net/BQdQc/2/

这应该可以帮助您入门。请注意，如果不需要填写整个表格，您的逻辑可能不会这么简单。例如，如果不需要填写每个电子邮件地址，您可能需要调整代码，以便仅在也填写名字/姓氏的情况下验证电子邮件。您必须根据您的要求仔细考虑此逻辑。希望这有帮助!

<小时/>

在您的submit函数中，您需要检查您的验证逻辑，如果存在验证错误则取消提交。此外，您还需要提供某种用户解决问题所需的反馈，格式如下:

jQuery('#submit').click(function() {
    if (validate_Email(blah) && validate_Pass(blah) &&
        validate_Cell(blah2) && validate_Cell(blah3) ...) {

        // proceed with jQuery.ajax post

    } else {

        // display error message to user

    }
}

您还可以这样表述以避免构建巨大的 if 语句:

isValid = true;
isValid = isValid && validate_Email(blah);
isValid = isValid && validate_Cell(blah2);
if (!some_complicated_function(blah3))
    isValid = false;
isValid = isValid && validate_Pass(blah3);
// etc.

if (isValid) {
    // proceed with jQuery.ajax post
} else {
    // display error message to user
}