Question

验证工作正常，如果输入了有效的电子邮件，如果无效则显示隐藏的框在叠加层上显示消息错误，但如何检查是否有keydown或返回？任何想法的家伙？

这是我的代码，也可以是accessed in a 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();

Answer 1

我相信您要实现的目标是在每次击键后运行电子邮件验证，并在有效之前不断通知用户他们的电子邮件是否有效。

有一个jQuery .keypress()事件来识别一个按键事件。

我在这里工作了： http://jsfiddle.net/bKT9W/2/

编辑：我相信彼得的答案要好得多：https://stackoverflow.com/a/13298005/1415352

他建议使用更好的正则表达式以及.keyup()事件来解决使用.keypress()

时出现的退格问题

Answer 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

此外，keyup最适合我，因为keypress没有处理退格（这里找到的解决方案：jQuery: keyPress Backspace won't fire?）

Answer 3

将您的函数“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');                                
        }
    });    
}

如何使用jQuery在电子邮件验证上的keypress上添加另一个语句

3 个答案: