form-Validity 验证函数

ValidityState 对象

DOM 接口 ValidityState 代表一个元素可有的有效性状态（validity states），其与约束验证（constraint validation）相关。这些状态一起解释了当元素值无效时，它的值为什么不能通过验证。

属性

对于以下每一个布尔值属性来说，值为 true 表示这就是验证失败的特定原因之一；valid 属性是例外，它为 true 表示元素值满足所有的约束条件。

badInput 只读

一个 Boolean，true 表示用户提供了浏览器不能转换的输入。

customError 只读

一个 Boolean，表示这个元素的自定义验证信息是否已通过调用元素的 setCustomValidity() 方法设置为一个非空字符串。

<input id="inp1" type="text" />
<input id="inp2" type="text" />
<script>
  console.log(document.getElementById('inp1').validity.customError) // false
  document.getElementById('inp2').setCustomValidity('Invalid')
  console.log(document.getElementById('inp2').validity.customError) // true
</script>

patternMismatch 只读

一个 Boolean，true 表示元素值不匹配规定的 pattern，false 则表示匹配。true 的时候元素可用 CSS 伪类 :invalid 匹配。

<input id="inp1" type="text" value="1234" />
<input id="inp2" type="text" value="A1" pattern="[a-z]{2}" />
<script>
  console.log(document.getElementById('inp1').validity.patternMismatch) // false
  console.log(document.getElementById('inp2').validity.patternMismatch) // true
</script>

rangeOverflow 只读

一个 Boolean，true 表示值已超过 max 属性规定的最大值，false 则表示小于或等于这个最大值。true 的时候元素可用 CSS 伪类 :invalid 和 :out-of-range 匹配。

<input id="inp1" type="number" value="1" max="2" />
<input id="inp2" type="number" value="3" max="2" />
<script>
  console.log(document.getElementById('inp1').validity.rangeOverflow) // false
  console.log(document.getElementById('inp2').validity.rangeOverflow) // true
</script>

rangeUnderflow 只读

一个 Boolean，true 表示值小于 min 属性规定的最小值，false 则表示大于或等于这个最小值。true 的时候元素可用 CSS 伪类 :invalid 和 :out-of-range 匹配。

<input id="inp1" type="number" value="3" min="2" />
<input id="inp2" type="number" value="1" min="2" />
<script>
  console.log(document.getElementById('inp1').validity.rangeUnderflow) // false
  console.log(document.getElementById('inp2').validity.rangeUnderflow) // true
</script>

stepMismatch 只读

一个 Boolean，true 表示值不符合由 step 属性规定的规则（即该值不能被步长值除尽，译注：假设最小值是 0）。false 表示其符合步长值规则。true 的时候元素可用 CSS 伪类 :invalid 和 :out-of-range 匹配。

<input id="inp1" type="number" value="4" min="2" max="6" step="2" />
<input id="inp2" type="number" value="3" min="2" max="6" step="2" />
<script>
  console.log(document.getElementById('inp1').validity.stepMismatch) // false
  console.log(document.getElementById('inp2').validity.stepMismatch) // true
</script>

tooLong 只读

一个 Boolean，true 表示值超过了 HTMLInputElement 或 HTMLTextAreaElement 对象中规定的 maxlength， false 表示值的长度小于或等于最大长度。注意：这个属性在 Gecko 中永远不会是 true，因为元素值不允许比 maxlength 长。true 的时候元素可用 CSS 伪类 :invalid 和 :out-of-range 匹配。

<input id="inp1" type="text" value="1234" />
<input id="inp2" type="text" value="A1" pattern="[a-z]{2}" />
<script>
  console.log(document.getElementById('inp1').validity.patternMismatch) // false
  console.log(document.getElementById('inp2').validity.patternMismatch) // true
</script>

tooShort 只读

一个 Boolean，true 表示值的长度小于 HTMLInputElement 或 HTMLTextAreaElement 对象中规定的 minlength， false 表示值的长度大于或等于最大长度。true 的时候元素可用 CSS 伪类 :invalid 和 :out-of-range 匹配。

typeMismatch 只读

一个 Boolean，true 表示元素值不满足所需的格式（可见于 type 是 email 或 url 时），false 表示格式正确。true 的时候元素可用 CSS 伪类 :invalid 匹配。

<input id="inp1" type="text" value="A" maxlength="1" />
<input id="inp2" type="text" value="A1" maxlength="1" />
<script>
  console.log(document.getElementById('inp1').validity.tooLong) // false
  console.log(document.getElementById('inp2').validity.tooLong) // true
</script>

valid 只读

一个 Boolean，true 表示元素满足所有的验证约束，因此被认为时有效的，false 表示有任一约束不满足。true 的时候元素可用 CSS 伪类 :valid 匹配，否则可用 CSS 伪类 :invalid 匹配。

valueMissing 只读

一个 Boolean， true 表示元素拥有 required 属性，但没有值，否则为 false。true 的时候元素可用 CSS 伪类 :invalid 匹配。

<input id="inp1" type="text" value="foo" required />
<input id="inp2" type="text" value="" required />
<script>
  console.log(document.getElementById('inp1').validity.valueMissing) // false
  console.log(document.getElementById('inp2').validity.valueMissing) // true
</script>