Javascript电子邮件验证 - 帮助?

时间:2011-11-24 18:57:19

标签: javascript jquery validation email submit

我目前正在使用电子邮件表单,该表单会在提交电子邮件地址后发布一些文本。我想为此添加一个验证选项,以便我不会发送给我的虚假信息。下面我附上了html代码,javascript,php和我想要使用的验证码。即使电子邮件无效,我目前仍遇到表单仍在处理的问题。请帮忙。

HTML

<form action="scripts/women-logo-white-process.php" method="post" id="contact_form_women_logo_white" name="ContactForm" onsubmit="return ValidateContactForm();">
     <div style="width: 179px; margin-left: 115px">
          <div style="width: 179px;">
               <input type="text" name="Email" id="email" value="email" rel="req" tabindex="2" class="text-area" />
          </div>
          <div id="loader" style="width: 121px; margin-left: 27px;">
               <div class="submit-button" style="width:121px;"><input type="submit" name="" value=""></div>
          </div>
      </div>
</form>

PHP

<?php 
$toemail = 'orders@paroteesclothing.com';;
$email = $_POST['email'];;

$messageBody = "Email: " . $email;



if(mail($toemail, 'Mens Logo White' . $subject, 'From: ' . $email)) {
    echo '
    <div>
      <div class="success"></div>
      <div class="email-text">Thank you for your interest in our products. We will notify you as soon as this product is available. Until then please check back for new designs and follow use on Twitter & Facebook @ParoteesApparel.</div>
    </div>';
} else {
    echo '
    <div>
      <div class="error"></div>
      <div class="email-text">There was a problem with your submission, please reload this page and try again.</div>
    </div>';
}
?>

当前Javascript

$(function () {
    $('#contact_form_men_logo_white').submit(function (e) {
        e.preventDefault();
        var form = $(this);
        var post_url = form.attr('action');
        var post_data = form.serialize();
        $('#loader', form).html('<div style="margin-left: -30px; margin-bottom: 35px; margin-top: -20px;"><div class="loader"></div><div class="wait-text">Please wait...</div></div>');
        $.ajax({
            type: 'POST',
            url: post_url,
            data: post_data,
            success: function (msg) {
                $(form).fadeOut(500, function () {
                    form.html(msg).fadeIn();
                });
            }
        });
    });
});

验证脚本我想添加到我当前的Javascript

function ValidateContactForm() {
    var email = document.ContactForm.Email;

    if (email.value == "")
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (email.value.indexOf("@", 0) < 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (email.value.indexOf(".", 0) < 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    return true;
}

2 个答案:

答案 0 :(得分:3)

在javascript中进行验证是一个愚蠢的错误,特别是因为你没有在PHP中进行验证。绕过Javascript验证器并直接向服务器发送虚假信息是微不足道的。

虽然JS验证对于提供即时反馈非常有用,但不应该依赖它来实际保护您的服务器端代码。

将您的PHP更改为:

$email = $_POST['email'];;

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
   die("Invalid email address");
}

答案 1 :(得分:2)

以下是Grrbrr正在谈论的正则表达式脚本的一个工作示例:

其中$(“#email”)将是您的表单输入元素:

$("#email").blur(function () {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = $(this).val();
if(reg.test(address) == false) {
$("#valbox").removeClass().addClass("valincorrect").html('Please enter a valid e-   mail').fadeIn(500)

 } else {
$("#valbox").removeClass().addClass("valcorrect").html('Accepted')

  }
 })