HTML5 模式到电子邮件字段答案

【问题标题】：HTML5 Pattern to email fieldHTML5 模式到电子邮件字段
【发布时间】：2021-01-11 06:19:29
【问题描述】：

我正在学习 HTML5 模式的工作原理，并且正在尝试进行电子邮件字段验证。
问题是当我在模式中添加“@”时，当我尝试时，该字段认为它无效。如果我尝试不带“@”的模式效果很好。

验证要求：

-> 以 5 个字符或数字开头
-> 然后是@
-> 连续，范围在 2 到 10 个字符或数字之间
-> 然后。
-> 必须有 'es'、'org' 或 'com'

代码：
<input type="text" name="email" id="email" pattern='^[a-zA-Z0-9]{5}@[a-zA-Z0-9]{2,10}.(es|com|org)$'>

PD：我知道电子邮件字段存在，但我正在测试 html5 模式。

【问题讨论】：

【解决方案1】：

您可以在 html 5 中使用 type= "email"。这将验证电子邮件，但要验证特定模式的电子邮件，您需要在 jquery/javascript 中编写 regex。

【讨论】：

【解决方案2】：

WHATWG 社区分享了这个与 HTML5 type="email" 匹配的兼容 JavaScript 和 Perl 的正则表达式。

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

【讨论】：