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
}

重复输入基本验证

1 个答案:

编辑1