HTML5输入类型电子邮件

Question

我在考虑在我的新网站中使用input type="email"，但我有一个问题，您更喜欢使用输入类型文本然后通过正则表达式检查值还是使用HTML 5电子邮件？

E-mail: <input type="email" name="usremail" />

HTML输入类型"Email"在使用时(浏览器或者其他方面)会有问题吗？

- Bert

---

我认为您不需要在这个问题中包含PHP标记。 - Samuel Heaney

Answer 1

如果浏览器不支持验证，则不会进行任何验证。您可以使用modernizr检测它是否支持，然后相应地采取行动（例如使用本机HTML5验证，或者使用类似于jQuery validation的东西）。

根据http://dev.w3.org/html5/markup/input.email.html，输入电子邮件时使用此正则表达式来验证它是一个电子邮件：

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

无论如何，您都应该在服务器端验证这些内容。

- Vigrond

---

+1 for the w3-pattern。在争论验证的正确方法时，有一些参考资料是很好的。 - hugo der hungrige

Answer 2

你可以使用html5的邮件来验证，但它只检查XXXX@XXXX是否有效，所以那是一个有效的电子邮件哈哈。

至少对我来说，我会建议使用jquery validate并始终进行服务器端验证。

使用email类型不会有害，因为不支持它的浏览器将转换为文本类型。

您可能需要查看modernizr以实现向后兼容。

- mcgrailm

---

那个 jQuery validate 是一个插件吗？ - Bert

是的，jQuery非常广泛使用并且有很好的文档支持，它是由其中一位jQuery开发团队成员开发的。 - mcgrailm

如果xxxx@xxxx是一个有效的电子邮件地址，使用较短的正则表达式和电子邮件输入类型进行检查将很容易。我只需要检查结尾部分是.com、.net还是.org？ - Bert

"xxxx@xxxx 是一个有效的电子邮件地址"。适用于 HTML5 验证。jQuery 验证更好。 - mcgrailm

我刚刚收到了一个链接 http://webmasters.stackexchange.com/questions/60701/input-type-email-allows-testtest-why，这是我所知道的一些我不知道的东西。 - Naresh Ravlani

Answer 3

正如你所知，HTML5在现有的浏览器中并没有得到完全支持。这个input type='email'被Chrome和Firefox支持，但是老版本的IE不支持。有一个解决方案：你可以继续使用这些HTML5输入元素，并使用这个JS库来支持其他浏览器：http://code.google.com/p/webforms2/

- Ashraf

---

我明白了，我之前考虑使用它是因为它的代码更小，可以减少编码量。 - Bert

Answer 4

你可以使用电子邮件：

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

适用于HTML5(http://davidwalsh.name/html5-email)这里

- Furqan Amin

---

请避免仅提供链接的答案。至少有礼貌地解释一下为什么和如何链接的内容将帮助OP。如果您链接到的网站关闭，您的问题将被投票降低并可能被删除。 - Rory McCrossan

Answer 5

如果您的浏览器支持，那么就不会有任何问题。如果不支持，则它将像普通文本字段一样工作。 http://www.w3schools.com/html5/html5_form_input_types.asp

- Dips

---

所有浏览器都支持这种输入类型吗？ - Bert

IE 和 Safari 不支持 HTML5，但是以下代码可以帮助在 IE9 上实现支持。<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> - Dips

Answer 6

此输入类型“电子邮件：”在IE9和Safari中无法工作，因此它将被视为type="text"，只有在Google Chrome和Mozilla Firefox上才能正常工作。如果浏览器支持HTML5，则此电子邮件将自动验证。

- TEE_P