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 param不为空，则会阻止表单提交并显示您的自定义消息：

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

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

正如您在我的代码段中看到的那样，即使字段不为空且电子邮件有效，它也会始终显示消息。它也阻止表单提交。

要传递表单提交，您只需要使用空字符串作为参数调用此方法：

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

修改

如果您想要检查模糊，则需要调用checkValidity方法：

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