我正在尝试制作一个包含一个电子邮件输入、一个复选框输入和一个提交输入的 html5 表单。我正在尝试将模式属性用于电子邮件输入，但我不知道在此属性中放置什么。我知道我应该使用一个必须匹配 JavaScript 模式产生的正则表达式，但我不知道该怎么做。
我试图让这个属性做的是检查以确保电子邮件包含一个 @ 和至少一个或多个点，如果可能的话，检查 @ 后面的地址是否是真实地址。如果我不能通过这个属性做到这一点，那么我会考虑使用 JavaScript，但是为了检查一个 @ 和一个或多个点，我确实想使用 pattern 属性。
模式属性需要检查：
另一种方法是使用 JavaScript，但对于所有其他情况，我不想使用 JavaScript。
我在 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 的所有建议在大多数情况下都是无效的。
这里有很多有效的电子邮件，例如：
由于获得正确验证的复杂性，我提出了一个非常通用的解决方案：
<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 的模式，“@”就足够了。但它拒绝两个或多个“@”和所有空格。
在 HTML5 中，您可以使用新的“电子邮件”类型：http ://www.w3.org/TR/html-markup/input.email.html
例如：
<input type="email" id="email" />
如果浏览器实现 HTML5，它将确保用户在字段中输入了有效的电子邮件地址。请注意，如果浏览器没有实现 HTML5，它将被视为“文本”类型，即：
<input type="text" id="email" />
<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="">
这是上述解决方案的修改版本，也接受大写字母。
这是我正在使用的方法，您可以根据需要对其进行修改：
^[\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 type="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,6}$">
如果您不想编写有关电子邮件标准的白皮书，请使用以下示例，该示例仅介绍了一个众所周知的 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>你可能想要这样的东西。注意属性：
<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.!#$%&’*+/=?^_`{|}~-]+@[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 />
一个简单的好答案可以是这样的输入：
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}">根据以下：
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 中可以使用更长的地址甚至 Unicode 字符，并且用户可以向本地或 IP 发送电子邮件，但我认为如果目标页面是公开的，最好不要接受不寻常的事情。
解释正则表达式：
(?![_.-])不是从这些开始的：_。-((?!--)[a-zA-Z\d-])接受 a 直到 z 和 A 直到 Z 和数字和 - （破折号）但不是 -((?![_.-][_.-])[a-zA-Z\d_.-])从 a 到 z 小写字母和 A 到 Z 大写字母和数字以及 _ 。- 接受但不是其中的任何一种。{0,63}长度从 0 到 63（第二组[a-zA-Z\d]将填充 +1，但不要让字符为 _ 。-）@at 标志(rule){1,2}此规则应存在 1 或 2 次。（对于子域和域）(rule)?或((rule)|)不存在或如果存在应遵循规则。（对于二级扩展）\.点注意：为了更加严格，您可以从模式uppercase中删除所有内容。A-Z
注意：为了不严格，Persian/Arabic numbers ٠١٢٣٤٥٦٧٨٩ ۰۱۲۳۴۵۶۷۸۹您可以在模式中添加\u0660-\u0669\u06f0-\u06f9旁边的所有内容\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}
2018 年更新答案
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})+$"