Html HTML5 电子邮件输入模式属性

HTML5 Email Input Pattern Attribute

提问by Colton

I'm trying to make a html5 form that contains one email input, one check box input, and one submit input. I'm trying to use the pattern attribute for the email input but I don't know what to place in this attribute. I do know that I'm supposed to use a regular expression that must match the JavaScript Pattern production but I don't know how to do this.

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

What I'm trying to get this attribute to do is to check to make sure that the email contains one @ and at least one or more dot and if possible check to see if the address after the @ is a real address. If I can't do this through this attribute then I'll consider using JavaScript but for checking for one @ and one or more dot I do want to use the pattern attribute for sure.

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

the pattern attribute needs to check for:

pattern 属性需要检查：

1. only one @
2. one or more dot
3. and if possible check to see if the address after the @ is a valid address

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

An alternative to this one is to use a JavaScript but for all the other conditions I do not want to use a JavaScript

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

采纳答案by Alwin Kesler

This is a dual problem (as many in the world wide web world).

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

You need to evaluate if the browser supports html5 (I use Modernizr to do it). In this case if you have a normal form the browser will do the job for you, but if you need ajax/json (as many of everyday case) you need to perform manual verification anyway.

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

.. so, my suggestion is to use a regular expression to evaluate anytime before submit. The expression I use is the following:

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

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

This one is taken from http://www.regular-expressions.info/. This is a hard world to understand and master, so I suggest you to read this page carefully.

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

回答by Stephen

I had this exact problem with HTML5s email input, using Alwin Keslers answer above I added the regex to the HTML5 email input so the user must have .something at the end.

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

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

回答by Anton Bessonov

Unfortunately, all suggestions except from B-Money are invalid for most cases.

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

Here is a lot of valid emails like:

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

• gü[email protected] (German umlaut)
• антон@россия.рф (Russian, рф is a valid domain)
• chinese and many other languages (see for example International emailand linked specs).

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

Because of complexity to get validation right, I propose a very generic solution:

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

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

It checks if email contains at least one character (also number or whatever except another "@" or whitespace) before "@", at least two characters (or whatever except another "@" or whitespace) after "@" and one dot in between. This pattern does not accept addresses like lol@company, sometimes used in internal networks. But this one could be used, if required:

它检查电子邮件在“@”之前是否至少包含一个字符（也是数字或除另一个“@”或空格之外的任何字符），在“@”之后是否至少包含两个字符（或除另一个“@”或空格之外的任何字符）和一个点之间。这种模式不接受像 lol@company 这样的地址，有时用于内部网络。但是如果需要，可以使用这个：

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

Both patterns accepts also less valid emails, for example emails with vertical tab. But for me it's good enough. Stronger checks like trying to connect to mail-server or ping domain should happen anyway on the server side.

这两种模式也接受不太有效的电子邮件，例如带有垂直标签的电子邮件。但对我来说已经足够了。无论如何，在服务器端应该进行更强大的检查，例如尝试连接到邮件服务器或 ping 域。

BTW, I just wrote angular directive (not well tested yet) for email validation with novalidateand without based on pattern above to support DRY-principle:

顺便说一句，我刚刚编写了 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');
        }
    };
}])

Usage:

用法：

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

For B-Money's pattern is "@" just enough. But it decline two or more "@" and all spaces.

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

回答by Anthony

In HTML5 you can use the new 'email' type: http://www.w3.org/TR/html-markup/input.email.html

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

For example:

例如：

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

If the browser implements HTML5 it will make sure that the user has entered a valid email address in the field. Note that if the browser doesn't implement HTML5, it will be treated like a 'text' type, ie:

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

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

回答by Jan Zavrel

This is the approach I'm using and you can modify it based on your needs:

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

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

Explanation:

解释：

1. We want to make sure that the e-mail address always starts with a word:

   ^[\w]

1. 我们要确保电子邮件地址始终以一个词开头：

   ^[\w]

A word is any character, digit or underscore. You can use [a-zA-Z0-9_] pattern, but it will give you the same result and it's longer.

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

1. Next, we want to make sure that there is at least one such character:

   ^[\w]{1,}

2. Next, we want to allow any word, digit or special characters in the name. This way, we can be sure that the e-mail won't start with the dot, but can contain the dot on other than the first position:

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

3. And of course, there doesn't have to be any of such character because e-mail address can have only one letter followed by @:

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

4. Next, we need the @ character which is mandatory, but there can be only one in the whole e-mail:

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

5. Right behind the @ character, we want the domain name. Here, you can define how many characters you want as minimum and from which range of characters. I'd go for all word characters including the hyphen [\w-]and I want at least two of them {2,}. If you want to allow domains like t.co, you would have to allow one character from this range {1,}:

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

6. Next, we need to deal with two cases. Either there's just the domain name followed by the domain extension, or there's subdomain name followed by the domain name followed by the extension, for example, abc.comversus abc.co.uk. To make this work, we need to use the (a|b)token where astands for the first case, bstands for the second case and |stands for logical OR. In the first case, we will deal with just the domain extension, but since it will be always there no matter the case, we can safely add it to both cases:

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

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

This pattern says that we need exactly one dot character followed by letters, no digits, and we want at least two of them, in both cases.

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

1. For the second case, we will add the domain name in front of the domain extension, thus making the original domain name a subdomain:

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

8. 对于第二种情况，我们将在域名后缀前添加域名，从而使原始域名成为子域：

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

The domain name can consist of word characters including the hyphen and again, we want at least two characters here.

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

1. Finally, we need to mark the end of the whole pattern:

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

2. Go here and test if your e-mail matches the pattern: https://regex101.com/r/374XLJ/1

9. 最后，我们需要标记整个模式的结束：

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

10. 去这里测试您的电子邮件是否与模式匹配：https: //regex101.com/r/374XLJ/1

回答by Vikrant Shitole

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

This is modified version of above solution which accept capital letter as well.

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

回答by Abibullah Rahamathulah

I used following Regex to satisfy for following emails.

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

[email protected] # Minimum three characters
[email protected] # Accepts Caps as well.
[email protected] # Accepts . before @

Code

代码

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

回答by B-Money

You probably want something like this. Notice the attributes:

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

• required
• type=email
• autofocus
• pattern

• 必需的
• 类型=电子邮件
• 自动对焦
• 图案

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

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

回答by Manifest Man

If you don,t want to write a whitepaper about Email-Standards, then use my following example which just introduce a well known CSS attribute(text-transform: lowercase) to solve the problem:

如果你不想写一个关于电子邮件标准的白皮书，那么使用我下面的例子，它只是引入了一个众所周知的 CSS 属性（文本转换：小写）来解决问题：

<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 ..." title="please enter a valid email" />

回答by Artem Bozhko

One more solution that is built on top of w3org specification.
Original regex is taken from w3org.
The last "*Lazy quantifier" in this regex was replaced with "+One or more quantifier".
Such a pattern fully complies with the specification, with one exception: it does not allow top level domain addresses such as "foo@com"

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

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