除了提交表单之外，触发 html5 电子邮件验证器失去焦点

Posted 2023-02-22

【中文标题】除了提交表单之外，触发 html5 电子邮件验证器失去焦点

【英文标题】：Fire html5 email validator on losing focus besides just on submission of forms

【发布时间】：2013-05-05 19:39:33

【问题描述】：

我有一个电子邮件输入字段，我在其中使用 ajax 检查电子邮件是否已经存在于我的数据库中，以从该电子邮件输入中失去焦点。在进行 ajax 调用之前，我想确保输入的电子邮件格式正确。我可以使用 html5 内置的电子邮件验证器来做到这一点，还是我必须编写自己的验证函数？

编辑：我已经在使用 html5 电子邮件验证器，但它仅在提交表单时验证电子邮件。

【问题讨论】：

它应该在每次按键时自动验证...您使用的是<input type="email" 对吗？

@MattBrowne <input id="email1" name="email1" required="required" type="email" placeholder="Your email address" onblur="checkEmailAvailability();" /> checkEmailAvailability() 是ajax函数

【参考方案1】：

在 Firefox 中，默认情况下它会在您输入时检查电子邮件的有效性（原生 HTML5 行为）： http://jsfiddle.net/xs65r/

但要支持所有 HTML5 浏览器，您需要手动调用 checkValidity() onblur 和/或 onkeydown。

查看此链接了解更多详情： HTML5 Chrome checkValidity onBlur

正如您在下面的评论中所说，在进行 ajax 调用之前，您必须在 onblur 函数的 if 子句中使用 this.checkValidity() 函数，并自行显示任何错误，因为在 Firefox 以外的浏览器中，本机除非提交表单，否则不会触发验证消息 UI。

【讨论】：

我知道它不会在您键入时验证电子邮件，因为我使用电子邮件输入类型进行登录，没有 onblur 或任何其他功能，并且验证器也仅在形成提交。

它必须是你的代码中的其他东西（或者可能是你的浏览器），因为 jsfiddle 就像我描述的那样工作。

我已经在Chrome Version 26.0.1410.64 和Internet Explorer version 10.0.9200.16540 上进行了测试。它仅在单击提交按钮时显示无效的电子邮件。

我很抱歉；我想我记得其他浏览器的行为与 Firefox 相同，但我错了。这应该有助于解决问题：***.com/questions/14351260/…

帮助。在进行 ajax 调用之前，我只需要在我的 onblur 函数的 if 子句中使用函数 checkValidity(this)。