1

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

不幸的是，我无法总结代码，但我只想知道我有大约 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());
        });
    });

我还有一些其他更复杂的验证，它们返回真或假。我只想知道如何不发送，如果有的话。

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

//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/

非常感谢任何帮助。:)

4

1 回答 1

0

编辑 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
}
于 2013-01-22T13:34:26.837 回答