HTML5 电子邮件类型和模式

使用新的 HTML5 之间是否存在任何问题、冲突或其他问题？type值（例如email, tel等）与pattern属性。

我不是指 HTML5 浏览器兼容性，只是指这些属性的新值与pattern属性。

为了清楚起见，我将使用几个例子type="email"

A. 仅键入属性。

<input type="email">

B. 仅有模式属性

<input type="text" pattern="[email regex]">

C. 电子邮件和模式属性一起使用

<input type="email" pattern="[email regex]">

我觉得你通过新的 HTML5 类型值获得了更多语义价值；然而，正则表达式更容易控制，因为 email@localhost 仅通过所使用的电子邮件值有效。

如果它们是重复的，我很抱歉，我环顾四周但没有看到这个特定的问题

EDIT

我发现提到了两者结合使用时可能产生的负面影响。不过，我不确定消息来源的可信度如何。

由于这两种验证电子邮件地址的方法各有利弊，因此您可以决定使用哪一种。您不应尝试同时使用它们，因为这可能会导致支持这两种功能的浏览器发生冲突。使用 type=”email” 的优点是它在语义上是正确的，使用pattern 属性的优点是网络上有几个易于使用的 polyfill，可确保支持更大范围的受众。

Source http://www.html5-tutorials.org/form-validation/validating-email/

请务必彻底测试两者是否同时使用。如果我发现任何负面影响，我会更新问题。

必要性

The pattern属性在任何完全符合 HTML5 规范的浏览器上都不是必需的type国家已实施。

例如，这就是type=email input应实施的元素：

If the multiple attribute isn't specified...

而元素的值既不是空字符串也没有一个有效的电子邮件地址，该元素存在类型不匹配问题。

If the multiple attribute is specified...

value 属性（如果指定）必须有一个值为有效的电子邮件地址列表 http://www.w3.org/TR/html5/forms.html#valid-e-mail-address-list.

— HTML5 规范的电子邮件状态 (type=email) http://www.w3.org/TR/html5/forms.html#e-mail-state-(type=email)

从根本上来说，这意味着该元素的value如果输入了空字符串或有效的电子邮件地址，将返回空。这意味着浏览器应该尝试验证电子邮件地址（如果没有）pattern属性存在。如果pattern属性存在，both将考虑浏览器和指定的正则表达式。

用处

尽管没有必要，您可能仍然想使用pattern属性只捕获某些类型的输入。例如，admin@mailserver1是一个有效的电子邮件地址（根据维基百科 https://en.wikipedia.org/wiki/Email_address#Valid_email_addresses），并且您可能希望明确仅允许具有 TLD 的电子邮件地址。这同样适用于特定地区的电话号码。