0

验证工作正常，如果输入了有效的电子邮件，如果无效则显示一个隐藏框，在覆盖层上显示消息错误，但如何检查 keydown 或 return？有什么想法吗？

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

我不确定这是否是这样做的方法，但现在对我有用，唯一的问题是不听 keypress keyup 或 keydown。这是更新的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

我喜欢基于有效/无效输入的淡入/淡出的想法。

我玩了一下，以下似乎对我有用：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?）

于 2012-11-08T21:20:02.047 回答
2

我相信您要实现的目标是在每次击键后运行电子邮件验证，并在其电子邮件有效或无效之前一直通知用户。

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

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

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

他建议了一个更好的正则表达式以及.keyup()解决使用时出现的退格问题的事件.keypress()

于 2012-11-08T21:07:36.860 回答
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 回答