3

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

使用电子邮件属性的原因

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

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

  • 不知道效果如何
  • 对于无效输入，外观与表单的其余输入字段不同

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

4

2 回答 2

4

关于 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

希望这会有所帮助。

于 2013-07-20T22:51:10.470 回答
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的一个工作示例中找到它。

于 2013-07-15T02:47:17.213 回答