0

有効な電子メールが入力されている場合、検証は正常に機能しています。有効でない場合は非表示のボックスが表示され、オーバーレイにメッセージエラーが表示されますが、キーダウンまたはリターンかどうかを確認するにはどうすればよいですか? アイデアはありますか？

これは私のコードで、 jsFiddle でもアクセスできます:

function validateEmail() {
    var validEmail = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    $('#user_email').blur(function(){
        if (validEmail.test(this.value)) {
            $('.masked-check').fadeIn(300)
        }
        else {
            $('.masked-check').fadeOut(300);
            $('.overlay').append('<div class="alert alert-error" id="errors"></div>');
            showOverlay($('#errors').html('Please enter a valid email...'));

        }
    }); 
}

validateEmail();

これがその方法であるかどうかはわかりませんが、今はうまくいきます。唯一の問題は、キープレスのキーアップまたはキーダウンを聞いていないことです。これが更新されたhttp://jsfiddle.net/creativestudio/bKT9W/3/です。これが最善の方法であるかどうかはわかりませんが、今のところ機能しています。

    function validateEmail() {
        var validEmail = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        $('#user_email').blur(function(){

        $('.masked-check').hide();

            if (validEmail.test(this.value)) {
                $('.masked-check').fadeIn(300)
            }
            else {
                $('.masked-check').fadeOut(300);
                $('.overlay').append('<div class="alert alert-error" id="errors"></div>');
                showOverlay($('#errors').html('Please enter a valid email...'));
            }

            if ($('#user_email').val()=='') {
                $('.masked-check').hide()
            }

        }); 
    }

    validateEmail();
4

3 に答える 3

2

あなたが達成しようとしているのは、各キーストロークの後に電子メールの検証を実行し、電子メールが有効かどうかを有効になるまでユーザーに通知し続けることだと思います。

.keypress()キー押下イベントを識別するjQuery イベントがあります。

ここでこれを機能させました： http://jsfiddle.net/bKT9W/2/

編集:以下のピーターの答えははるかに優れていると思います: https://stackoverflow.com/a/13298005/1415352

彼は、より良い正規表現と、.keyup()使用時に発生するバックスペースの問題を解決するイベントを提案しています.keypress()

于 2012-11-08T21:07:36.860 に答える
2

有効/無効な入力に基づいてフェードイン/アウトするというアイデアが気に入っています。

私は少し遊んでみましたが、次のようにうまく機能しているようです：http://jsfiddle.net/yc9Pj/

function validateEmail(){

    var validEmail = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    $('#user_email').keyup(function(){
    if (validEmail.test(this.value)) {
        $('.masked-check').fadeIn(300)
    }
    else {
        $('.masked-check').fadeOut(300);
        //alert('Please enter a valid email');                                
    }
    });    
}

validateEmail();​

この返信に基づいてメールの正規表現を適応させたことに注意してください: Using a regular expression to validate an email address

さらに、キープレスはバックスペースを処理しなかったため、キーアップは私にとって最も効果的でした (解決策はここにあります: jQuery: keyPress Backspace won't fire? )

于 2012-11-08T21:20:02.047 に答える
0

関数「validateEmail」を次のように変更します。

function validateEmail(){

    var validEmail = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    $('#user_email').keydown(function(event){
        if (event.keyCode !== 13) {
            return;
        }
        if (validEmail.test(this.value)) {
            $('.masked-check').fadeIn(300)
        }
        else {
            //$('.masked-check').fadeOut(300);
            alert('Please enter a valid email');                                
        }
    });    
}
于 2012-11-09T08:29:45.547 に答える