Javascript电子邮件验证

时间:2014-03-30 21:21:27

标签: javascript jquery validation email

我通常不会在这样的地方提问,因为它充满了我可能会找到的可以解决我的问题的信息。但是,我是PHP,Javascript等的新手。我似乎无法理解我遇到的这个问题,所以我转向你们,非常感谢他们的帮助。

所以,我正在玩一个同事创建的评论系统,但想要作为一个Javascript函数来检查电子邮件的验证。以下是代码......

$(function () {
    //alert(event.timeStamp);
    $('.new-com-bt').click(function (event) {
        $(this).hide();
        $('.new-com-cnt').show();
        $('#name-com').focus();
    });

    /* when start writing the comment activate the "add" button */
    $('.the-new-com').bind('input propertychange', function () {
        $(".bt-add-com").css({
            opacity: 0.6
        });
        var checklength = $(this).val().length;
        if (checklength) {
            $(".bt-add-com").css({
                opacity: 1
            });
        }
    });

    /* on clic  on the cancel button */
    $('.bt-cancel-com').click(function () {
        $('.the-new-com').val('');
        $('.new-com-cnt').fadeOut('fast', function () {
            $('.new-com-bt').fadeIn('fast');
        });
    });

    // on post comment click 
    $('.bt-add-com').click(function () {
        var theCom = $('.the-new-com');
        var theName = $('#name-com');
        var theMail = $('#mail-com');
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]    {2,4})+$/;

        if (!theCom.val()) {
            alert('oh! Don`t forget your message!');
        }
        if (!filter.test(theMail.value)) {
            alert('Please provide a vaild email address');
            theMail.focus;
            return false;

        } else {
            $.ajax({
                type: "POST",
                url: "ajax/add-comment.php",
                data: 'act=add-com&id_post=' + <? php echo $id_post; ? > +'&name=' + theName.val() + '&email=' + theMail.val() + '&comment=' + theCom.val(),
                success : function (html) {
                    theCom.val('');
                    theMail.val('');
                    theName.val('');
                    $('.new-com-cnt').hide('fast', function () {
                        $('.new-com-bt').show('fast');
                        $('.new-com-bt').before(html);
                    })
                }
            });
        }
    });

});

正如你所看到的那样,我提供了一个var过滤器等......但是简单地解释一下,最终的结果是它会警告说电子邮件是无效的,但是当输入有效的电子邮件并尝试提交时,无论什么它只是提出警报和最终结果,这意味着根本不会发生。

很抱歉,如果我对此有所了解或对此没有任何了解,但无论如何我都愿意提供帮助。

再次感谢任何帮助。

由于

2 个答案:

答案 0 :(得分:4)

有用的功能。

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.    [0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
} 


// Example
if(validateEmail("test@test.com"))
{
    alert("Valid!");
}else{
    alert("Invalid!");
}

答案 1 :(得分:0)

如果要验证多种输入类型,可能需要考虑使用parsley.js之类的验证库。我更喜欢欧芹,但有几个库可用。 (注意:欧芹依赖于jquery)。

<form id="emailForm" data-parsley-validate>
   <label for="email">Email * :</label>
   <input type="email" name="email" required />
</form>

默认情况下,parsley将显示类似&#34的通用错误消息;此字段是必需的。这应该是有效的电子邮件。&#34;,但您可以轻松自定义邮件,或者根本不选择显示任何邮件。

data-parsley-error-message="my message" // A global error message for this input
data-parsley-email-message="my message" // Replace the default parsley email error message for this input