JS API验证—约束DOM验证属性

约束验证DOM属性

是一组用于访问和管理表单输入元素的验证状态的属性。这些属性可以帮助我们判断用户在表单中输入的数据是否符合预期的格式和规则。

Validity

validity 是约束验证 DOM 属性的一个属性，用于获取输入元素的有效性状态。它返回一个 ValidityState 对象，该对象包含了一组布尔属性，用于表示输入元素的各种验证状态。

validityState 对象包含以下常用属性：

1.  valueMissing：指示是否缺失输入值。如果设置了 required 属性并且用户未填写任何内容，则该属性为 true。

2.  typeMismatch：指示输入值是否与输入字段类型不匹配。例如，使用 email 类型的输入字段时，如果输入的值不符合电子邮件格式要求，则该属性为 true。

3.  patternMismatch：指示输入值是否与指定的正则表达式模式不匹配。如果设置了 pattern 属性，并且输入值不满足该正则表达式模式，则该属性为 true。

4.  tooLong：指示输入值是否过长。如果设置了 maxLength 属性，并且输入值的长度超过指定的最大长度，则该属性为 true。

5.  tooShort：指示输入值是否过短。如果设置了 minLength 属性，并且输入值的长度低于指定的最小长度，则该属性为 true。

6.  rangeOverflow：指示输入值是否超过指定的范围上限。如果设置了 max 属性，并且输入值超过了该最大值，则该属性为 true。

7.  rangeUnderflow：指示输入值是否低于指定的范围下限。如果设置了 min 属性，并且输入值低于了该最小值，则该属性为 true。

通过检查这些属性的值，我们可以确定输入元素是否有效，进而进行相应的处理，例如显示错误消息、禁用提交按钮等。

实例：

Toolong属性

当在输入元素上设置了 maxLength 属性，并且用户输入的值长度超过了指定的最大长度时，tooLong 属性就会变为 true。

例如，我们创建一个文本框，并设置其 maxLength 属性为 10：

<input type="text" maxlength="10">

如果用户在该文本框中输入的字符长度超过了 10，那么 tooLong 属性就会被设置为 true。我们可以通过 JavaScript 来检查该属性并根据需要采取相应的操作。

以下是一个例子，当用户在文本框中输入超过最大长度时，将显示错误消息：

<input type="text" id="myInput" maxlength="10">
<p id="errorText" style="display: none; color: red;">输入超过最大长度。www.dotcpp.com</p>
<script>
  var input = document.getElementById("myInput");
  var errorText = document.getElementById("errorText");
  input.addEventListener("input", function() {
    if (input.value.length > input.maxLength) {
      errorText.style.display = "block";
    } else {
      errorText.style.display = "none";
    }
  });
</script>

在上述示例中，每当用户在文本框中输入内容时，input 事件会触发。我们在事件处理程序中检查输入值的长度是否超过了最大长度，并根据结果显示或隐藏错误消息。

这只是一个简单的例子，你可以根据自己的需求进行更复杂的操作，比如禁用提交按钮或以其他方式提醒用户输入超过了最大长度。

希望这个例子能够帮助你理解 tooLong 属性的用法。