2011-11-24 113 views
0

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

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 = '[email protected]';; 
$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; 
} 
+0

什么是“脚趾邮件”? (我*尝试*将其读为“发送给电子邮件”,但失败了。)如果您有一组电子邮件过滤器,它们会是“脚趾邮件快捷方式”吗?另外,如果你打算使用JS来进行客户端电子邮件验证,请使用正则表达式或其他内容;这是一个可怕的电子邮件地址检查。 –

+0

我将你的代码解压到http://jsfiddle.net/Ya4d6/,如果我按回车或确定它似乎每件事情都行得通!! – Grrbrr404

+0

它是“电子邮件”,指的是电子邮件发送到的电子邮件地址 –

回答

3

在JavaScript中进行验证是愚蠢的错误,尤其是因为您还没有在PHP中进行验证。绕过一个Javascript验证器并直接发送虚假信息到服务器是微不足道的。

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

你的PHP更改为类似:

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

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

而对于JavaScript网站,正则表达式将是一个更好的方法。这应该工作:[A-Z0-9 ._%+ - ] + @ [A-Z0-9 .-] + \。[AZ] {2,4} – Grrbrr404

+0

@MarcB这是一个很好的解决方案, t做很多的PHP,所以这是完美的。我唯一的问题是在文本显示后,我可以在页面上重新加载该表单吗?它目前用“无效的电子邮件地址”替换表单,我希望这样说,但也有表单,以便用户可以输入有效的电子邮件。如果更容易,我也不会介意在浏览器中弹出 –

2

这里的正则表达式脚本Grrbrr的工作示例在谈论:

其中$(“#电子邮件”)将是你的表单输入元素:

$("#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') 

    } 
})