Javascript 电子邮件验证 - 帮助？答案

【问题标题】：Javascript Email Validation - Help?Javascript 电子邮件验证 - 帮助？
【发布时间】：2011-11-24 18:57:18
【问题描述】：

我目前正在使用电子邮件表单，在提交电子邮件地址后会发布一些文本。我想为此添加一个验证选项，这样我就不会收到发送给我的虚假信息。下面我附上了我想使用的 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;
}

【问题讨论】：

什么是“脚趾甲”？（我尝试将其解读为“发送电子邮件”但失败了。）如果您有一组电子邮件过滤器，它们会是“脚趾邮件剪裁器”吗？此外，如果您打算使用 JS 进行客户端电子邮件验证，请使用正则表达式或其他东西；这是一个可怕的电子邮件地址检查。
我将您的代码提取到jsfiddle.net/Ya4d6，如果我按回车键或确定，似乎一切正常！？
是“to email”，是指发送邮件的邮箱地址

标签： javascript jquery validation email submit

【解决方案1】：

在 javascript 中进行验证是一件傻事，尤其是因为您没有在 PHP 中进行验证。绕过 Javascript 验证器并直接向服务器发送虚假信息是微不足道的。

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

将您的 PHP 更改为：

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

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

【讨论】：

对于 javascript 网站，正则表达式会是更好的方法。这应该有效：[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}
@MarcB 这是一个很好的解决方案，我不会做太多的 php，所以这是完美的。我唯一的问题是显示文本后我可以在页面上重新加载该表单吗？它目前用“无效的电子邮件地址”替换表单，我想说的是，但也有表单，以便用户可以输入有效的电子邮件。如果这样更容易，我也不介意在浏览器中弹出一个窗口

【解决方案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')

  }
 })

【讨论】：