表格確認 - 電子郵件/電話號碼

Question

我有一個驗證功能的問題，我只在一個函數中創建它，我想添加電子郵件的驗證，如@和數字1-9。 我該如何添加？

HTML：

<form onsubmit="return validate();" name="formValidation">
    <label>First Name:</label>
    <input type="text" name="firstName" /><br /><br />
    <label>Last Name:</label>
    <input type="text" name="lastName" /><br /><br />
    <label>E_mail:</label>
    <input type="text" name="Email" /><br /><br />
    <label>Confirm E_mail:</label>
    <input type="text" name="confirmEmail" /><br /><br />
    <label>Address:</label>
    <input type="text" name="Address" /><br /><br />
    <label>Telephone nr:</label>
    <input type="text" name="telephoneNr" /><br /><br />
    <br />
    <p>submit your form: </p><input type="submit" value="Submit" />
</form>

JS：

function validate(){
    if(document.formValidation.firstName.value == "" ||
    document.formValidation.lastName.value == "" ||
    document.formValidation.Email.value == "" ||
    document.formValidation.confirmEmail.value == "" ||
    document.formValidation.Address.value == "" ||
    document.formValidation.telephoneNr.value == "")
    {
        alert("Please fill all the boxes before submitting!");
        return false;
    } else {
        alert('Your form has been submitted!');
    }

}

Answer 1

來自http://www.w3resource.com/javascript/form/email-validation.php ：

此功能將使用javascript驗證電子郵件：

function ValidateEmail(mail)   
{  
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))  
  {  
    return (true)  
  }  
    alert("You have entered an invalid email address!")  
    return (false)  
}  

要驗證電話號碼：

function validatePhone(phone) {
    var error = "";
    var stripped = phone.replace(/[\(\)\.\-\ ]/g, '');

   if (stripped == "") {
        error = "You didn't enter a phone number.";
    } else if (isNaN(parseInt(stripped))) {
        phone = "";
        error = "The phone number contains illegal characters.";

    } else if (!(stripped.length == 10)) {
        phone = "";
        error = "The phone number is the wrong length. Make sure you included an area code.\n";
    }
}

Answer 2

您想使用正則表達式。 有很多問題已經描述了如何做到這一點：

https://stackoverflow.com/search?q=javascript+regex+phone+number+e​​mail

Answer 3

我可以給你一個我用過的示例函數。 它並不完美，但只需極少的編輯就可以快速輕松地在您的環境中進行設置：

function mail_check(){
var email   = document.getElementById(\'email\').value;
var email_check = email.split("@");
if (email_check[1]){var email_check2 = email_check[1].split(".");}
if (!email_check[1] || !email_check2[0] || !email_check2[1]) {
document.getElementById(\'mail_status\').innerHTML = "<font color=red>Invalid Email address!</font>";
return false;}
else if (email_check[1] && email_check2[0] && email_check2[1]) {
document.getElementById(\'mail_status\').innerHTML = "<font color=green>Valid Email address!</font>";
return true;}
}

我猜很明顯我有一個空的span元素，它會被OnKeyUp js事件改變（基本上onkeyup調用函數，這會產生系統檢查的錯覺......雖然它確實如此，所以我想這不是幻覺之后全部 - 哈！）

希望有所幫助。 如果您需要進一步的幫助，請告訴我們！

干杯!

Answer 4

這是一個非常常見的任務，你試圖解決它的方式就像是2008年的一樣，嘿，它幾乎是2013年）

第一次嘗試查找regExp以這種方式解決它。

但是，為什么不在舊版/不支持的瀏覽器上使用HTML5 表單驗證和Modernizir進行回退。

您將獲得所有現代瀏覽器的本機支持，這比JS更快，加上寫得很好的js，它會以適當的方式關心它，因為那些由於某些原因不支持form validations 。