HTML5 电子邮件输入模式属性

Question

我正在尝试制作一个 html5 表单，其中包含一个电子邮件输入、一个复选框输入和一个提交输入。 我正在尝试使用电子邮件输入的模式属性，但我不知道要在此属性中放置什么。我确实知道我应该使用必须与 JavaScript 模式产生式匹配的正则表达式，但我不知道该怎么做。

我试图让这个属性做的是检查以确保电子邮件包含一个@和至少一个或多个点，如果可能的话检查@后面的地址是否是真实地址。如果我无法通过此属性执行此操作，那么我会考虑使用 JavaScript，但为了检查一个 @ 和一个或多个点，我确实想使用模式属性。

模式属性需要检查：

1. 只有一个@
2. 一个或多个点
3. 如果可能的话，检查@后面的地址是否是有效地址

另一种方法是使用JavaScript，但对于所有其他条件，我不这样做想要使用 JavaScript。

Answer 1

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

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

Answer 2

不幸的是，除了 B-Money 之外的所有建议在大多数情况下都是无效的。

这里有很多有效的电子邮件，例如：

• gü[email protected]（德语元音变音)
• антон@россия.рф（俄语，рф 是有效域名）
• 中文和许多其他语言（参见示例 国际电子邮件和链接规格）。

由于正确验证的复杂性，我提出了一种非常通用的解决方案：

<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]+
用法：
<input type="text" is-email />

对于 B-Money 的模式是“@”就足够了。但它拒绝两个或多个“@”和所有空格。
;
    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');
        }
    };
}])

用法：

对于 B-Money 的模式是“@”就足够了。但它拒绝两个或多个“@”和所有空格。

Answer 3

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

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

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

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

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

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

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

^[\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 代表第二种情况case 和 | 代表逻辑或。在第一种情况下，我们将仅处理域扩展名，但由于无论情况如何它都始终存在，因此我们可以安全地将其添加到这两种情况中：

   ^[\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,}|< strong>[.][\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 6

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

2021 UPDATED & 2021 UPDATED &支持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="[email protected]"
  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、Yahoo、Gmail 等）只会接受的常见字符。这意味着仅接受： 点 (.)、破折号 (-)、下划线 (_) 位于 az 之间>（小写）或AZ（大写 - 只是因为它很常见 - 感谢 Badri Paudel）和数字，并且不接受彼此相邻的两个，最多64字符。

注意：目前，URL 中可以包含更长的地址，甚至 Unicode 字符，用户也可以向本地或 IP 发送电子邮件，但我认为如果目标不接受异常的内容，最好还是不要接受页面是公开的。

正则表达式的解释：

1. (?![_.-]) 不是以这些开头： _ 。 -
2. ((?!--)[a-zA-Z\d-]) 接受 a 到 z 和 A 到 Z 以及数字和 - (破折号)，但不接受 --
3. (( ?![_.-][_.-])[a-zA-Z\d_.-]) 从 a 到 z 小写，A 到 Z 大写，还有数字和 _ 。 - 接受但不接受任何类型的双重。
4. {0,63} 长度从 0 到 63（第二组 [a-zA-Z\d] 将填充 +1，但不要让字符成为_ . -)
5. @ at 符号
6. (rule){1,2} 此规则应该存在 1 或 2 次。 （对于子域和域）
7. (rule)? 或 ((rule)|) 不存在，或者如果存在应遵循规则。 （对于二级扩展）
8. \. 点

注意：为了对大写更加严格，您可以删除所有AZ从模式。

注意：对于波斯/阿拉伯数字不严格 ٠١٢٣٤٥٦٧٨٩ 012334567789 你可以添加 \u0660- \u0669\u06f0-\u06f9 位于模式中所有 \d 旁边。

尝试正则表达式：https://regexr.com/64kjf

注意：使用^...$ 在输入模式中不是必需的，但对于一般的正则表达式测试将需要。这意味着字符串的开始/结束应该与规则相同，而不仅仅是一部分。

属性解释：

type="email" 或 type="text" （email 在现代浏览器中将有助于验证，但它不会不关心开头或结尾的空格以进行验证或获取值）

name="email" autocomplete="on" 为了让浏览器记住简单的最后填写的输入以自动完成

lang="en"< /code> 帮助默认输入为英文

inputmode="email" 将有助于触摸键盘更加兼容

maxlength="254" 设置输入的最大长度

autocapitalize="off"pellcheck="false"auto Correct="off" 关闭浏览器中可能出现错误的自动更正器

required="" 如果该字段为空或无效，则此字段为必填项, 表单未提交

pattern="..." 里面的正则表达式会检查验证

---

\w=a-zA-Z\d_ so：

最轻版本
(?![_.-])((?![_.-][_.-])[\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 7

<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 8

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

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

<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 />

---

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

  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 9

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

演示 - 测试电子邮件输入

Answer 10

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

• 必需的
• type=email
• 自动对焦
• 模式

[电子邮件受保护]" 自动对焦需要模式="[^ @]*@[^ @]*" /> ;

Answer 11

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

[email protected] # Minimum three characters
[email protected] # Accepts Caps as well.
[email protected] # 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 12

另一种基于 w3org 规范构建的解决方案。
原始正则表达式取自 w3org。
此正则表达式中的最后一个“* 惰性量词”已替换为“+ 一个或多个量词”。
这种模式完全符合规范，但有一个例外：它不允许顶级域地址，例如“foo@com”

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

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

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

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

Answer 15

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

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

Answer 16

使用 Html5 和 Angular 的电子邮件验证正则表达式如下

<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 17

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

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

你可以在这个网站上测试一下：
regex101

Answer 18

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

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})+$"