javascript - 重複入力の基本的な検証

Question

私はこの質問をしようとし続けていますが、コードが長すぎるなどの理由で、もう一度やり直します。

残念ながら、コードを要約することはできませんでしたが、true または false を返す約 4 つの検証関数があることを知りたいと思います。次に例を示します。

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

どんな助けでも大歓迎です。:)

score 0 · Accepted Answer

編集 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
}

javascript - 重複入力の基本的な検証

1 に答える 1

編集 1

Related

Reference