HTML 5的输入类型电子邮件如何工作并且可靠吗？

Question

我正在创建一个接收电子邮件地址的表单，并决定是使用input type='email'还是input type='text'并使用JavaScript进行验证。我知道确定电子邮件地址是否是有效格式是一项艰巨的任务，所以有人知道HTML 5的电子邮件属性有多好吗？

使用电子邮件属性的原因

• 使我免于编写复杂的正则表达式
• 代码可读性
• 给出无效的电子邮件地址时看起来很不错

不使用电子邮件属性的原因

• 不知道它的准确程度
• 对于无效输入，外观与表单
的其余输入字段不同

编辑：任何人都知道e-mail属性在它使用的正则表达式中是如何工作的？

Answer 1

关于HTML5的事实<input type="email">：

1. 每个浏览器都以不同的方式处理电子邮Opera接受*@*作为有效的电子邮件地址。在Safari，Chrome和Firefox中，您至少需要输入*@*.*
2. 并非所有浏览器都“支持”type =“email”。您仍然可以使用type =“email”，但如果他们不识别type =“email”，浏览器会将其威胁为type =“text”
3. 在iPhone上，当您输入type =“email”的输入时，iPhone会在键盘的主屏幕上显示“@”，使您的应用程序更加用户友好
4. 使用type =“email”
时，您可以提供正则表达式

我的建议是你应该开始使用这个新的HTML5属性以及你自己的验证来实现上面的第（3）点。

欲了解更多信息：

1. http://davidwalsh.name/html5-email
2. http://www.the-art-of-web.com/html/html5-form-validation/#.UesKldKl5KU
3. http://diveintohtml5.info/forms.html

希望这有帮助。

Answer 2

我用过它并喜欢它。但是，我必须覆盖验证错误消息。我就是这样做的。

//Listen for the 'input' event on the email field.  If HTML5 validation throws a typeMismatch, then
// override the default message with something more useful and/or sarcastic.
$('#email').bind('input', function () {
    //We need to reset it to blank or it will throw an invalid message.
    this.setCustomValidity('');
    if (!this.validity.valid) {
        this.setCustomValidity("Dude '" + this.value + "' is not a valid email. Try something like "+
            "jim@email.org. And no we are not checking if it actually works, we are just looking "+
            "for the @ sign. ");
    }
});

您可以在github的工作示例中找到此信息。