为什么 <input type=\"email\"> 将有效的电子邮件地址标记为无效？答案

【问题标题】：Why does <input type="email"> mark valid email addresses as invalid?为什么 <input type=\"email\"> 将有效的电子邮件地址标记为无效？
【发布时间】：2023-01-02 21:24:29
【问题描述】：

根据维基百科，这些是有效的电子邮件地址。

" "@example.org
"john..doe"@example.org
"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com
postmaster@[123.123.123.123]
postmaster@[IPv6:2001:0db8:85a3:0000:0000:8a2e:0370:7334]

<input type="email"> 拒绝他们无效。

此外，根据维基百科，此地址无效。

1234567890123456789012345678901234567890123456789012345678901234+x@example.com

然而<input type="email"> 接受它是有效的。

为什么<input type="email"> 的实现如此不精确？

我知道 HTML 标准指定了与此行为一致的特定验证正则表达式。但为什么它在形式上是不正确的呢？

请注意，我并不是要比默认正则表达式或任何其他实用解决方案更好的正则表达式。我要求解释为什么有人认为以形式上不正确的方式验证电子邮件是个好主意。

【问题讨论】：

维基百科不是可靠的来源，因为允许多个用户编辑。此外，输入标签遵循正则表达式，您可以看到 here。
我假设您必须在您使用的浏览器的问题跟踪器中询问这个问题。我怀疑您的问题是否有一个符合所有浏览器行为的通用答案
您可以在这里查看：html.spec.whatwg.org/multipage/input.html#valid-e-mail-address 以了解电子邮件验证的规范。浏览器的实现可能会有所不同

标签： html email-validation html-input

【解决方案1】：

电子邮件验证应该是 w3.org 定义的以下内容

一个电子邮件地址。

匹配以下 [ABNF] 产生式的任何字符串：

1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )

…其中 atext 在 [RFC 5322] 中定义，而 ldh-str 在 [RFC 1034] 中定义。

也就是说，匹配以下正则表达式的任何字符串：

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

根据Mozilla，它正在检查其格式是否正确。它不检查它是否有效。

如果你想要一个更大的集合，那么你可以在 JavaScript 中自己检查它或者返回到服务器。

【讨论】：

【解决方案2】：

电子邮件验证是基于 Web 浏览器的默认 regex 完成的。

基于docs 默认模式是

/^[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])?)*$/

为了克服这种不一致。尝试使用 `pattern` 字段设置您自己的 `regex`

<input pattern = "regular_exp">

例子

<input 
  type = 'email'
  pattern = "^[a-zA-Z0-9]+(?:.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:.[a-zA-Z0-9]+)*$"
/>

【讨论】：

“有效”是什么意思？ OP 没有共享任何正则表达式
我想将注意力转移到默认的 regex 上，然后再设置自己的 regex 。我根据您的评论进行了编辑，删除了“有效”一词

为了克服这种不一致。尝试使用 pattern 字段设置您自己的 regex

例子

为了克服这种不一致。尝试使用 `pattern` 字段设置您自己的 `regex`