ValidityState: valid 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

ValidityState 接口的只读属性 valid 指示一个 ValidityState 对象的 <input> 元素的值是否满足所有验证约束,因此被认为是有效的。

如果为 true,则该元素匹配 :valid CSS 伪类;否则,将应用 :invalid CSS 伪类。

如果 ValidityState 符合所有约束,则为 true,否则为 false

示例

显示有效性状态

以下示例检查一个 数字输入元素 的有效性。使用 min 属性添加了一个约束,该约束为输入设置了最小值 18。如果用户输入的任何值不是大于 17 的数字,则该元素将无法通过约束验证,并且将应用匹配 input:invalid 的样式。

css
input:invalid {
  outline: red solid 3px;
}
input:valid {
  outline: palegreen solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" required />
js
const userInput = document.getElementById("age");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.valid) {
    log("Input OK…");
  } else {
    log("Bad input detected…");
  }
});

规范

规范
HTML
# dom-validitystate-valid-dev

浏览器兼容性

另见