2011-11-24 176 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') 

    } 
})