javascript - 使用 .checkValidity() 时如何获取有效性失败的原因

Question

当我在输入元素上使用 .checkValidity() 并返回 false 时，我如何获得失败的原因？

我知道我可以使用 ValidityState interface并检查每个可能的失败，但是那些只返回一个 bool 值。

通过默认浏览器的有效性检查实现，它为用户提供了一个解释有效性检查失败的字符串。

例如，如果您要使用:

<input type="email" />

并且用户使用 me@.domain.com 提交表单，它将为用户提供一个工具提示，显示为 '.'在“@.domain.com”中的错误位置使用。

我正在创建自己的表单验证实现，因为我不喜欢浏览器默认工具提示的样式和行为，显然，如果我可以为用户提供相同类型的验证消息，那么用户体验会好得多简单地使用诸如“您输入的电子邮件无效”之类的通用内容。

Answer 1

您好，您可以使用元素的 validationMessage 属性

validationMessage : Contains the message a browser will display when the validity is false.

调用 checkValidity() 后检索元素的 validationMessage 属性。

var inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  }