HTML5 电子邮件输入模式属性

我在 HTML5s 电子邮件输入中遇到了这个确切的问题，使用上面的 Alwin Keslers 回答我将正则表达式添加到 HTML5 电子邮件输入中，因此用户必须在末尾有 .something。

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

---

这是一个双重问题（与万维网世界中的许多问题一样）。

您需要评估浏览器是否支持 html5（我使用 Modernizr 来做）。在这种情况下，如果您有一个正常的表单，浏览器将为您完成这项工作，但如果您需要 ajax/json（与许多日常情况一样），无论如何您都需要执行手动验证。

..所以，我的建议是在提交之前随时使用正则表达式进行评估。我使用的表达式如下：

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

这个取自 http://www.regular-expressions.info/ 。这是一个很难理解和掌握的世界，所以我建议你仔细阅读这个页面。

---

不幸的是，除了 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 域，无论如何都应该在服务器端进行。

顺便说一句，我刚刚为使用 novalidate 的电子邮件验证编写了 angular 指令（尚未经过充分测试），并且没有基于上述模式来支持 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 的模式，“@”就足够了。但它拒绝两个或多个“@”和所有空格。

---

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

例如：

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

如果浏览器实现 HTML5，它将确保用户在字段中输入了有效的电子邮件地址。请注意，如果浏览器没有实现 HTML5，它将被视为“文本”类型，即：

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

---

这是我正在使用的方法，您可以根据需要对其进行修改：

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

解释：

我们要确保电子邮件地址始终以单词开头：^[\w]

单词是任何字符、数字或下划线。您可以使用 [a-zA-Z0-9_] 模式，但它会给您相同的结果并且更长。

接下来，我们要确保至少有一个这样的字符：^[\w]{1,} 接下来，我们要允许名称中包含任何单词、数字或特殊字符。这样，我们可以确定电子邮件不会以点开头，但可以在第一个位置以外的位置包含点： ^[\w]{1,}[\w.+-] 和当然，不必有任何这样的字符，因为电子邮件地址只能有一个字母后跟@： ^[\w]{1,}[\w.+-]{0,} 接下来，我们需要@字符，这是必须的，但整个电子邮件中只能有一个： ^[\w]{1,}[\w.+-]{0,}@ 在@字符后面，我们想要域名。在这里，您可以定义最少需要多少个字符以及来自哪个字符范围。我会选择包括连字符 [\w-] 在内的所有单词字符，并且我想要至少其中两个 {2,}。如果要允许像 t.co 这样的域，则必须允许 {1,} 范围内的一个字符：^[\w]{1,}[\w.+-]{0,}@[\w -]{2,} 接下来，我们需要处理两种情况。要么只是域名后跟域扩展名，要么是子域名后跟域名后跟扩展名，例如 abc.com 与 abc.co.uk。为了完成这项工作，我们需要使用 (a|b) 标记，其中 a 代表第一种情况，b 代表第二种情况，|代表逻辑或。在第一种情况下，我们将只处理域扩展名，但由于无论如何它都将始终存在，我们可以安全地将其添加到两种情况下：^[\w]{1,}[\w.+- ]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][a-zA-Z]{2,})

这种模式说我们只需要一个点字符后跟字母，没有数字，并且在两种情况下我们都需要至少两个。

对于第二种情况，我们将域名添加到域扩展的前面，从而使原始域名成为子域：^[\w]{1,}[\w.+-]{0,}@[\ w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})

域名可以由包括连字符在内的单词字符组成，同样，我们在这里至少需要两个字符。

最后，我们需要标记整个模式的结束：^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a- zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$ 到这里测试您的电子邮件是否与模式匹配： https://regex101.com/r/374XLJ/1

---

<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="">

这是上述解决方案的修改版本，也接受大写字母。

---

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

Demo - Test the email input

---

如果您不想编写有关电子邮件标准的白皮书，请使用以下示例，该示例仅介绍了一个众所周知的 CSS 属性（文本转换：小写）来解决问题：

如果您确实希望数据不作为小写值到达服务器端，那么您应该这样做：

如果您确实希望数据以小写值的形式到达服务器端，那么您应该这样做：

const emailElmtRegex = new RegExp('[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}'); document.getElementById("输入").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 }

客户端到服务器端 - 简单的电子邮件验证！

输入：

发送：

---

你可能想要这样的东西。注意属性：

必需的

类型=电子邮件

自动对焦

图案

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

---

我使用以下正则表达式来满足以下电子邮件。

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,})" />

---

另一种基于 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>

---

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

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

---

一个简单的好答案可以是这样的输入：

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}$

输入：不（：占位符显示）：无效{背景颜色：粉红色；盒子阴影：0 0 0 2px 红色； } /* :not(:placeholder-shown) = 为空时，不视为无效 */ /* :not(:-ms-placeholder-shown) 用于 IE11 */ /* :invalid = 不是跟随模式或 maxlength 以及如果需要但未填充 */ /* 注意：当自动完成功能开启时，浏览器可能会强制 CSS 更改输入背景和字体颜色，所以我使用 box-shadow 作为第二个选项*/ 类型您的电子邮件：

根据以下：

有关标准电子邮件格式的资源：电子邮件地址中允许使用哪些字符？

有关标准 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、Yahoo、Gmail 等著名的免费电子邮件服务只会接受它们的常用字符。这意味着只接受：点 (.)、破折号 (-)、下划线 (_) 就在 az（小写）或 AZ（大写——因为它很常见——感谢 Badri Paudel）和数字之间，也不接受双它们彼此相邻，最多 64 个字符。

注意：现在，URL 中可以使用更长的地址甚至 Unicode 字符，并且用户可以向本地或 IP 发送电子邮件，但我认为如果目标页面是公开的，最好不要接受不寻常的事情。

解释正则表达式：

(?![_.-]) 不是从这些开始的： _ 。 - ((?!--)[a-zA-Z\d-]) 接受 a 到 z 和 A 到 Z 和数字和 - (dash) 但不接受 -- ((?![_.-][_. -])[a-zA-Z\d_.-]) 从 a 到 z 小写和 A 到 Z 大写和数字以及 _ 。 - 接受但不是其中的任何一种。 {0,63} 长度从 0 到 63（第二组 [a-zA-Z\d] 将填充 +1，但不要让字符为 _ 。-）@ at 符号（规则）{1, 2}这条规则应该存在1到2次。 （对于子域和域）（规则）？或 ((rule)|) 不存在或如果存在则应遵循规则。 （用于二级扩展）\.点

注意：为了对 uppercase 更加严格，您可以从模式中删除所有 A-Z。

注意：对于 Persian/Arabic numbers ٠١٢٣٤٥٦٧٨٩ ۰۱۲۳۴۵۶۷۸۹ 不严格，您可以在模式中的所有 \d 旁边添加 \u0660-\u0669\u06f0-\u06f9。

试试正则表达式：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}

---

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,}))$/

---

以下正则表达式模式应该适用于大多数电子邮件，包括俄罗斯电子邮件。

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

---

我已经测试了以下正则表达式，它给出了与 Chrome Html 电子邮件输入验证相同的结果。

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

您可以在此网站上进行测试：regex101

---

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

---

使用带有角度的 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>

这是工作示例..

---

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="">

---

尝试这个

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

---