HTML5 验证 - 覆盖 document.getElementById('inputID').validity.valid value

Question

我正在尝试同时执行客户端＆amp;服务器端电子邮件验证。

我需要在电子邮件上验证：

<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required> 

如果存在电子邮件，则服务器端也有执行验证，如果确实存在 - 我需要验证会失败（invalid）。

如何实现这种功能？有没有办法将document.getElementById('inputID').validity.valid属性修改为false？

Answer 1

您可以尝试使用setCustomValidity方法。如果error参数不是空的，它将阻止表单提交并显示您的自定义消息：

document.getElementById('inputID').setCustomValidity('Email already exists!');

<form>
  <input id="inputID" required />
  <input type="submit" />
</form>

您可以在我的片段中看到，即使字段不是空的，并且电子邮件是有效的，它也将始终显示消息。它也防止表格提交。

要通过表单提交您只需要用空字符串作为param：

调用此方法

 document.getElementById('inputID').setCustomValidity('');

编辑

如果您希望它检查Blur，则需要调用checkValidity方法：

document.getElementById('inputID').onblur = function( e ) {
  e.target.checkValidity();
};