HTML5 電子郵件輸入模式屬性

Question

我正在嘗試制作一個包含一個電子郵件輸入、一個復選框輸入和一個提交輸入的 html5 表單。 我正在嘗試將模式屬性用於電子郵件輸入，但我不知道在此屬性中放置什么。 我知道我應該使用一個必須匹配 JavaScript 模式產生的正則表達式，但我不知道該怎么做。

我試圖讓這個屬性做的是檢查以確保電子郵件包含一個 @ 和至少一個或多個點，如果可能的話，檢查 @ 后面的地址是否是真實地址。 如果我不能通過這個屬性做到這一點，那么我會考慮使用 JavaScript，但是為了檢查一個 @ 和一個或多個點，我確實想使用 pattern 屬性。

模式屬性需要檢查：

1. 只有一個 @<\/li>
2. 一個或多個點<\/li>
3. 如果可能，檢查@之后的地址是否是有效地址<\/li><\/ol>

   另一種方法是使用 JavaScript，但對於所有其他情況，我不想使用 JavaScript。

   "

Answer 1

我在使用 HTML5s 電子郵件輸入時遇到了這個確切的問題，使用上面的 Alwin Keslers 答案，我將正則表達式添加到 HTML5 電子郵件輸入中，因此用戶必須在最后有 .something。

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

Answer 2

這是一個雙重問題（與萬維網世界中的許多問題一樣）。

您需要評估瀏覽器是否支持 html5（我使用 Modernizr 來做）。 在這種情況下，如果您有一個普通表單，瀏覽器將為您完成這項工作，但是如果您需要 ajax/json（與許多日常情況一樣），您無論如何都需要執行手動驗證。

.. 所以，我的建議是在提交之前隨時使用正則表達式進行評估。 我使用的表達如下：

var email = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

這個取自http://www.regular-expressions.info/ 。 這是一個很難理解和掌握的世界，所以我建議你仔細閱讀這個頁面。

Answer 3

不幸的是，除 B-Money 之外的所有建議在大多數情況下都是無效的。

這里有很多有效的電子郵件，例如：

• günter@web.de（德語變音）
• антон@россия.рф（俄語，рф是有效域）
• 中文和許多其他語言（參見例如國際電子郵件和鏈接規范）。

由於正確驗證的復雜性，我提出了一個非常通用的解決方案：

<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />

它檢查電子郵件在“@”之前是否包含至少一個字符（也是數字或除另一個“@”或空格之外的任何字符），在“@”之后是否至少包含兩個字符（或除另一個“@”或空格之外的任何字符）和一個點之間。 這種模式不接受像 lol@company 這樣的地址，有時用於內部網絡。 但是如果需要，可以使用這個：

<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />

這兩種模式也接受不太有效的電子郵件，例如帶有垂直標簽的電子郵件。 但對我來說已經足夠好了。 無論如何，在服務器端應該進行更強大的檢查，例如嘗試連接到郵件服務器或 ping 域。

順便說一句，我剛剛編寫了 angular 指令（尚未經過充分測試）用於使用novalidate進行電子郵件驗證，並且沒有基於上述模式來支持 DRY 原則：

.directive('isEmail', ['$compile', '$q', 't', function($compile, $q, t) {
    var EMAIL_PATTERN = '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$';
    var EMAIL_REGEXP = new RegExp(EMAIL_PATTERN, 'i');
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel){
            function validate(value) {
                var valid = angular.isUndefined(value)
                    || value.length === 0
                    || EMAIL_REGEXP.test(value);
                ngModel.$setValidity('email', valid);
                return valid ? value : undefined;
            }
            ngModel.$formatters.unshift(validate);
            ngModel.$parsers.unshift(validate);
            elem.attr('pattern', EMAIL_PATTERN);
            elem.attr('title', 'Invalid email address');
        }
    };
}])

用法：

<input type="text" is-email />

對於 B-Money 的模式是“@”就足夠了。 但它拒絕兩個或多個“@”和所有空格。

Answer 4

在 HTML5 中，您可以使用新的“電子郵件”類型： http : //www.w3.org/TR/html-markup/input.email.html

例如：

<input type="email" id="email" />

如果瀏覽器實現 HTML5，它將確保用戶在字段中輸入了有效的電子郵件地址。 請注意，如果瀏覽器未實現 HTML5，它將被視為“文本”類型，即：

<input type="text" id="email" />

Answer 5

<input name="email" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="form-control" placeholder="Email*" id="email" required="">

這是上述解決方案的修改版本，也接受大寫字母。

Answer 6

這是我正在使用的方法，您可以根據需要對其進行修改：

^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$

解釋：

1. 我們要確保電子郵件地址始終以一個詞開頭：

   ^[\\w]

單詞是任何字符、數字或下划線。 您可以使用 [a-zA-Z0-9_] 模式，但它會給您相同的結果，而且時間更長。

2. 接下來，我們要確保至少有一個這樣的字符：

   ^[\\w] {1,}

3. 接下來，我們要允許名稱中包含任何單詞、數字或特殊字符。 這樣，我們可以確保電子郵件不會以點開頭，但可以在第一個位置以外的位置包含點：

   ^[\\w]{1,} [\\w.+-]

4. 當然，不必有任何這樣的字符，因為電子郵件地址只能有一個字母后跟@：

   ^[\\w]{1,}[\\w.+-] {0,}

5. 接下來，我們需要@ 字符，這是強制性的，但整個電子郵件中只能有一個：

   ^[\\w]{1,}[\\w.+-]{0,} @

6. 在@ 字符后面，我們需要域名。 在這里，您可以定義所需的最少字符數以及字符范圍。 我會選擇所有單詞字符，包括連字符[\\w-]並且我想要至少兩個{2,} 。 如果您想允許像t.co這樣的域，則必須允許此范圍{1,} 中的一個字符：

   ^[\\w]{1,}[\\w.+-]{0,}@ [\\w-]{2,}

7. 接下來，我們需要處理兩種情況。 要么只是域名后跟域擴展名，要么是子域名后跟域名后跟擴展名，例如， abc.com與abc.co.uk 。 為了完成這項工作，我們需要使用(a|b)標記，其中a代表第一種情況， b代表第二種情況，而| 代表邏輯或。 在第一種情況下，我們將只處理域擴展名，但由於無論如何它都會存在，我們可以安全地將它添加到兩種情況中：

   ^[\\w]{1,}[\\w.+-]{0,}@[\\w-]{2,} ([.][a-zA-Z]{2,}|[.][ a-zA-Z]{2,})

這個模式說我們只需要一個點字符后跟字母，沒有數字，並且我們至少需要兩個，在這兩種情況下。

8. 對於第二種情況，我們將在域名后綴前添加域名，從而使原始域名成為子域：

   ^[\\w]{1,}[\\w.+-]{0,}@[\\w-]{2,}([.][a-zA-Z]{2,}| [.][ \\w-]{2,} [.][a-zA-Z]{2,})

域名可以由包括連字符在內的單詞字符組成，我們在這里至少需要兩個字符。

9. 最后，我們需要標記整個模式的結束：

   ^[\\w]{1,}[\\w.+-]{0,}@[\\w-]{2,}([.][a-zA-Z]{2,}|[.][ \\w-]{2,}[.][a-zA-Z]{2,}) $

10. 去這里測試您的電子郵件是否與模式匹配： https : //regex101.com/r/374XLJ/1

Answer 7

你可能想要這樣的東西。 注意屬性：

• 必需的
• 類型=電子郵件
• 自動對焦
• 圖案

<input type="email" value="" name="EMAIL" id="EMAIL" placeholder="your@email.com" autofocus required pattern="[^ @]*@[^ @]*" />

Answer 8

我使用以下正則表達式來滿足以下電子郵件。

abc@example.com # Minimum three characters
ABC.xyz@example.com # Accepts Caps as well.
abce.xyz@example.co.in # Accepts . before @

代碼

<input type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" />

Answer 9

如果你不想寫一個關於電子郵件標准的白皮書，那么使用我下面的例子，它只是引入了一個眾所周知的 CSS 屬性（文本轉換：小寫）來解決問題：

如果您確實不希望數據以小寫 value 的形式到達服務器端，那么您應該這樣做：

 <input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\\.[a-zA-Z]{2,4}" style="text-transform: lowercase" placeholder="enter email here ..." required />

---

如果您確實希望數據以小寫 value 的形式到達服務器端，那么您應該這樣做：

 const emailElmtRegex = new RegExp('[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\\.[a-zA-Z]{2,4}'); document.getElementById("entered").innerHTML = ""; document.getElementById("send").innerHTML = "" function lower() { let emailElmt = document.getElementById("email"); document.getElementById("entered").innerHTML = "Entered: " + emailElmt.value; emailElmt.value = emailElmt.value.toLowerCase(); if (emailElmtRegex.test(emailElmt.value)) { document.getElementById("send").innerHTML = "Send: " + emailElmt.value; } else { document.getElementById("send").innerHTML = "" } }

 input[type=email]#email { "text-transform: lowercase }

 <!DOCTYPE html> <html> <body> <h3>Client Side to Server Side - Simple Email validation!</h3> <input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\\.[a-zA-Z]{2,4}" placeholder="enter email here ..." required oninput="lower()" /> <p id="entered">Entered:</p> <p id="send">Send:</p> </body> </html>

Answer 10

<input type="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,6}$">

演示 - 測試電子郵件輸入

Answer 11

另一種建立在 w3org 規范之上的解決方案。
原始正則表達式取自w3org 。
此正則表達式中的最后一個“ *懶惰量詞”被替換為“ +一個或多個量詞”。
這種模式完全符合規范，只有一個例外：它不允許頂級域地址，例如“ foo@com ”

<input
    type="email" 
    pattern="[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+"
    title="valid@email.com"
    placeholder="valid@mail.com"
    required>

Answer 12

<input type="email" name="email" id="email" value="" placeholder="Email" required />

文檔http://www.w3.org/TR/html-markup/input.email.html

Answer 13

更新 2018 答案

去這里http://emailregex.com/

Javascript：

/^(([^<>()\\[\\]\\\\.,;:\\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,}))$/

Answer 14

以下正則表達式模式應該適用於大多數電子郵件，包括俄語電子郵件。

[^@]+@[^\\.]+\\..+

Answer 15

一個簡單的好答案可以是這樣的輸入：

2021 更新並支持 IE10+

^(?![_.-])((?![_.-][_.-])[a-zA-Z\\d_.-]){0,63}[a-zA-Z\\d]@((?!-)((?!--)[a-zA-Z\\d-]){0,63}[a-zA-Z\\d]\\.){1,2}([a-zA-Z]{2,14}\\.)?[a-zA-Z]{2,14}$

 input:not(:placeholder-shown):invalid{ background-color:pink; box-shadow:0 0 0 2px red; } /* :not(:placeholder-shown) = when it is empty, do not take as invalid */ /* :not(:-ms-placeholder-shown) use for IE11 */ /* :invalid = it is not followed pattern or maxlength and also if required and not filled */ /* Note: When autocomplete is on, it is possible the browser force CSS to change the input background and font color, so i used box-shadow for second option*/

 Type your Email: <input type="email" name="email" lang="en" maxlength="254" value="" placeholder="example@domain.com" autocapitalize="off" spellcheck="false" autocorrect="off" autocomplete="on" required="" inputmode="email" pattern="(?![_.-])((?![_.-][_.-])[a-zA-Z\\d_.-]){0,63}[a-zA-Z\\d]@((?!-)((?!--)[a-zA-Z\\d-]){0,63}[a-zA-Z\\d]\\.){1,2}([a-zA-Z]{2,14}\\.)?[a-zA-Z]{2,14}">

根據以下內容：

• 有關標准電子郵件格式的資源： 電子郵件地址中允許使用哪些字符？
• 有關標准 HTML 電子郵件輸入屬性的資源：

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email

• URL 中域的最大長度（254 個字符）
• 最長可能的子域（可能 = 0-64 個字符）、域（= 0-64 個字符）、一級擴展（= 2-14 個字符）、二級擴展（可能 = 2-14 個字符），如@Brad 所動。
• 避免在電子郵件名稱中使用不常用但允許的字符，只接受常用字符，而著名的免費電子郵件服務（如 Outlook、雅虎、Gmail 等）只會接受它們。 這意味着只接受：點 (.) ，破折號 (-) ，下划線 (_)就在az （小寫）或AZ （大寫- 只是因為它很常見 - 感謝Badri Paudel ）和數字之間，也不接受雙倍它們彼此相鄰，最多64 個字符。

注意：現在，URL 中可以使用更長的地址甚至 Unicode 字符，用戶也可以向本地或 IP 發送電子郵件，但我認為如果目標頁面是公開的，最好不要接受不尋常的事情。

解釋正則表達式：

1. (?![_.-])不是以這些開頭的： _ 。 ——
2. ((?!--)[a-zA-Z\\d-])接受直到 z 和 A 直到 Z 和數字和 - （破折號）但不是 -
3. ((?![_.-][_.-])[a-zA-Z\\d_.-])從 a 到 z 小寫和 A 到 Z 大寫和數字以及 _ 。 - 接受但不是任何形式的雙重。
4. {0,63}從零到 63 的長度（第二組[a-zA-Z\\d]將填充 +1 但不要讓字符為 _ 。-）
5. @ at 符號
6. (rule){1,2}這個規則應該存在 1 或 2 次。 （用於子域和域）
7. (rule)? 或((rule)|)不存在或如果存在應遵循規則。 （用於二級擴展）
8. \\. 點

注意：為了更嚴格地使用uppercase您可以從模式中刪除所有AZ 。

注意：如果對Persian/Arabic numbers ٠١٢٣٤٥٦٧٨٩ ۰۱۲۳۴۵۶۷۸۹不嚴格，您可以在模式中的所有\\d旁邊添加\٠-\٩\۰-\۹ 。

試試正則表達式： https : //regexr.com/64kjf

注意：在輸入模式中不需要使用^...$ ，但對於一般的 RegEx 測試將需要。 這意味着字符串的開始/結束應該與規則相同，而不僅僅是一部分。

屬性說明：

type="email"或type="text" （ email在現代瀏覽器中將有助於驗證，它也不關心驗證或獲取值的開始或結束空間）

name="email" autocomplete="on"瀏覽器記住上次填寫的簡單輸入以自動完成

lang="en"幫助默認輸入為英文

inputmode="email"將有助於觸摸鍵盤更加兼容

maxlength="254"設置輸入的最大長度

autocapitalize="off" spellcheck="false" autocorrect="off"在瀏覽器中關閉可能錯誤的自動更正器

required=""此字段為必填項，如果為空或無效，則不提交表單

pattern="..."里面的正則表達式會檢查驗證

---

\\w = a-zA-Z\\d_所以：

最輕版本
(?![_.-])((?![_.-][_.-])[\\w.-]){0,63}[a-zA-Z\\d]@((?!-)((?!--)[a-zA-Z\\d-]){0,63}[a-zA-Z\\d]\\.){1,2}([a-zA-Z]{2,14}\\.)?[a-zA-Z]{2,14}

Answer 16

我已經測試了以下正則表達式，它給出了與 Chrome Html 電子郵件輸入驗證相同的結果。

[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*

你可以在這個網站上測試一下： regex101

Answer 17

^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$

Answer 18

使用帶有角度的 Html5 的電子郵件驗證正則表達式如下

<div class="item">
      <p>Email Address<span class="required">*</span></p>
      <input type="email" name="to" id="to" placeholder="Email address" tabindex="6" required
        [(ngModel)]="pancard.email" #to="ngModel" pattern="[a-zA-Z0-9._-]*@[a-zA-Z]*\.[a-zA-Z]{2,3}" />
        <div class="alertField" *ngIf="to.invalid && (to.dirty || to.touched)">
          <div *ngIf="to.errors?.['required']">Email is required </div>
          <div *ngIf="to.errors?.['pattern']">Invalid Email Id.</div>
        </div>
    </div>

這是工作示例..

Answer 19

pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}"

<input type="email"  class="form-control" id="driver_email" placeholder="Enter Driver Email" name="driver_email" pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}" required="">

Answer 20

嘗試這個

pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"