Html 对于验证电子邮件标记、正则表达式和输入类型，哪一个更好？

请帮助我选择电子邮件验证的最佳解决方案，我发现了3个选项：

1、有图案

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

2，type=“text”和电子邮件标签

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

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

3，type=“email”和电子邮件标签

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

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

---

谢谢你

这个模式肯定是最完整的，其他的只检查输入中是否有一个“@”

古老的浏览器（IE9及之前）不支持

type=“email”

属性，但是现在，这可能不是一个问题，因为许多网站正在放弃对IE11的支持

作为：

支持电子邮件输入类型的浏览器会自动提供验证，以确保输入框中只输入与Internet电子邮件地址标准格式匹配的文本。实现该规范的浏览器应使用与以下正则表达式等效的算法：

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

这不是一个完全琐碎的模式。另外，您当前的模式

{2，4}

将只匹配具有2到4个字符的TLD，但有些TLD具有更多字符

电子邮件属性（例如，

中

之前的

电子邮件

）看起来没有任何用途

如果您不打算支持过时的浏览器，那么使用

type=“email”

并让浏览器符合规范可能是最简单的，而不是自己尝试重新实现某些（可能不符合规范的）版本

<input type="email">

请记住，这只是前端验证，但客户机可以在前端运行他们想要的任何代码-如果您想确保服务器处理的电子邮件有效，请确保在后端也进行验证。

我认为regEXP（第一种方法）是最好的。它与第三个类似，但有一个好处：

---

您可以使用自定义样式自定义和您自己的验证消息，它可以帮助您的网站/应用程序看起来更漂亮、更友好

请查看这些网站：；