使用 JavaScript 驗證電子郵件地址文本框

Question

我需要驗證用戶從文本框出來時輸入的電子郵件地址。
我用谷歌搜索過這個，但我得到了表單驗證 JScript； 我不想要表單驗證。 我想要文本框驗證。
我已經寫在 JScript 下，但“如果電子郵件無效，則不會返回相同的頁面”。

 function validate(email) {

            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            //var address = document.getElementById[email].value;
            if (reg.test(email) == false) 
            {
                alert('Invalid Email Address');
                return (false);
            }
 }

Answer 1

假設您的正則表達式是正確的：

在您的腳本標簽內

function validateEmail(emailField){
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(emailField.value) == false) 
        {
            alert('Invalid Email Address');
            return false;
        }

        return true;

}

在您的文本字段中：

<input type="text" onblur="validateEmail(this);" />

Answer 2

這是一個很老的問題，所以我更新了這個答案以考慮 HTML 5 電子郵件類型。

對於 HTML 5，您實際上根本不需要 JavaScript； 只需使用電子郵件輸入類型：

<input type="email" />

• 如果您想使其成為強制性的，您可以添加所需的參數。

• 如果您想添加額外的 RegEx 驗證（例如限制為@foo.com電子郵件地址），您可以使用模式參數，例如：

   <input type="email" pattern=".+@foo.com" />

MozDev 上提供了更多信息。

原答案如下

---

首先 - 我會推薦 Hexillion 的電子郵件驗證器 RegEx： http ://hexillion.com/samples/

它非常全面 - ：

^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!$)){0,61}[a-zA-Z0-9]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$

我認為您需要在 JavaScript 中使用一個函數，例如：

function validateEmail(sEmail) {
  var reEmail = /^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!$)){0,61}[a-zA-Z0-9]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/;

  if(!sEmail.match(reEmail)) {
    alert("Invalid email address");
    return false;
  }

  return true;

}

在 HTML 輸入中，您需要使用 onblur 觸發事件 - 執行此操作的簡單方法是簡單地添加如下內容：

<input type="text" name="email" onblur="validateEmail(this.value);" />

當然，這缺少一些健全性檢查，並且不會進行域驗證（必須在服務器端完成）-但它應該為您提供一個非常可靠的 JS 電子郵件格式驗證器。

注意：我傾向於使用match()字符串方法而不是test() RegExp 方法，但它應該沒有任何區別。

Answer 3

isEmailValid的結果可用於測試電子郵件的語法是否有效。

var validEmailRegEx = /^[A-Z0-9_'%=+!`#~$*?^{}&|-]+([\.][A-Z0-9_'%=+!`#~$*?^{}&|-]+)*@[A-Z0-9-]+(\.[A-Z0-9-]+)+$/i
var isEmailValid = validEmailRegEx.test("Email To Test");

Answer 4

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
} 

在上面的代碼中使用 javascript 驗證電子郵件 ID 有效。

Answer 5

驗證電子郵件是驗證 HTML 表單時非常重要的一點。 在本頁中，我們討論了如何使用 JavaScript 驗證電子郵件：

電子郵件是由@ 符號分隔成兩部分的字符串（ASCII 字符的子集）。 一個“personal_info”和一個域，即personal_info@domain。 Personal_info 部分的長度最長可達 64 個字符，域名最長可達 253 個字符。 Personal_info 部分包含以下 ASCII 字符。

1. 大寫 (AZ) 和小寫 (az) 英文字母。
2. 數字 (0-9)。
3. 人物 ！ # $ % & ' * + - / = ? ^ _ ` { | }~
4. 特點 。 （句點、點或句號），前提是它不是第一個或最后一個字符，並且不會一個接一個。

域名 [例如 com、org、net、in、us、info] 部分包含字母、數字、連字符和點。

有效電子郵件 ID 示例

mysite@ourearth.com

my.ownsite@ourearth.org

mysite@you.me.net

無效的電子郵件 ID 示例

mysite.ourearth.com [@ 不存在]

mysite@.com.my [ tld（頂級域）不能以點“.”開頭。 ]

@you.me.net [@ 前沒有字符]

mysite123@gmail.b [ ".b" 不是有效的 tld ]

mysite@.org.org [ tld 不能以點“.”開頭。 ]

.mysite@mysite.org [ 電子郵件不應以“.”開頭。 ]

mysite()*@gmail.com [這里的正則表達式只允許字符、數字、下划線和破折號]

mysite..1234@yahoo.com [不允許使用雙點]

用於驗證電子郵件 ID 的 JavaScript 代碼

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

Answer 6

您是否也在驗證服務器端？ 這是非常重要的。

對電子郵件使用正則表達式不被認為是最佳實踐，因為幾乎不可能正確封裝圍繞電子郵件的所有標准。 如果您確實必須使用正則表達式，我通常會采用以下方式：

^.+@.+$

它基本上檢查你有一個包含@的值。 然后，您將通過向該地址發送電子郵件來進行驗證。

任何其他類型的正則表達式都意味着您可能會拒絕完全有效的電子郵件地址，但我同意@Ben 提供的答案。

Answer 7

如果您希望允許重音（請參閱RFC 5322 ）並允許像 .quebec 這樣的新域擴展名。 使用這個表達式：

/\b[a-zA-Z0-9\u00C0-\u017F._%+-]+@[a-zA-Z0-9\u00C0-\u017F.-]+\.[a-zA-Z]{2,}\b/

• '\À-\ſ' 部分用於允許重音。 我們為此使用 unicode 范圍。
• '{2,}' 只是表示域擴展名至少有 2 個字符。 如果您不喜歡不定式范圍，可以將其替換為 '{2,63}'。

基於這篇文章

傑斯菲德勒

 $(document).ready(function() { var input = $('.input_field'); var result = $('.test_result'); var regExpression = /\\b[a-zA-Z0-9\À-\ſ._%+-]+@[a-zA-Z0-9\À-\ſ.-]+\\.[a-zA-Z]{2,}\\b/; $('.btnTest').click(function(){ var isValid = regExpression.test(input.val()); if (isValid) result.html('<span style="color:green;">This email is valid</span>'); else result.html('<span style="color:red;">This email is not valid</span>'); }); });

 body { padding: 40px; } label { font-weight: bold; } input[type=text] { width: 20em } .test_result { font-size:4em; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="search_field">Input</label> <input type='text' class='input_field' /> <button type="button" class="btnTest"> Test </button> <br/> <div class="test_result"> Not Tested </div>

Answer 8

<!DOCTYPE html>
    <html>
    <body>

    <h2>JavaScript Email Validation</h2>

    <input id="textEmail">

    <button type="button" onclick="myFunction()">Submit</button>

    <p id="demo" style="color: red;"></p>

    <script>
    function myFunction() {
        var email;

        email = document.getElementById("textEmail").value;

            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

            if (reg.test(textEmail.value) == false) 
            {
            document.getElementById("demo").style.color = "red";
                document.getElementById("demo").innerHTML ="Invalid EMail ->"+ email;
                alert('Invalid Email Address ->'+email);
                return false;
            } else{
            document.getElementById("demo").style.color = "DarkGreen";      
            document.getElementById("demo").innerHTML ="Valid Email ->"+email;
            }

       return true;
    }
    </script>

    </body>
    </html> 

Answer 9

<h2>JavaScript Email Validation</h2>

<input id="textEmail">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo" style="color: red;"></p>

<script>
function myFunction() {
    var email;

    email = document.getElementById("textEmail").value;

        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(textEmail.value) == false) 
        {
        document.getElementById("demo").style.color = "red";
            document.getElementById("demo").innerHTML ="Invalid EMail ->"+ email;
            alert('Invalid Email Address ->'+email);
            return false;
        } else{
        document.getElementById("demo").style.color = "DarkGreen";      
        document.getElementById("demo").innerHTML ="Valid Email ->"+email;
        }

   return true;
}
</script>

Answer 10

您應該使用以下已測試所有可能的電子郵件組合的正則表達式

     function validate(email) {
            var reg = "^[a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,15})$";
            //var address = document.getElementById[email].value;
            if (reg.test(email) == false) 
            {
                alert('Invalid Email Address');
                return (false);
            }  
     }

如果您在 Input 標簽中使用它，則額外提示，您可以直接在該標簽示例中添加正則表達式

<input type="text"  
       name="email" 
       class="form-control"
       placeholder="Email" 
       required 
       pattern="^[a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,15})$"/>

在上面你可以看到兩個屬性required & pattern

需要確保它輸入塊有數據@time of submit &
模式確保它輸入標簽驗證基於模式（正則表達式）@提交時間

有關更多信息，您可以去 throw doc