ValidityState: valid 属性

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本中使用。它自以下版本起在浏览器中可用 2018 年 12 月.

ValidityState 接口的只读valid属性指示 <input> 元素的值是否满足其所有验证约束，因此被视为有效。

如果为true，则元素与 :valid CSS 伪类匹配；否则，将应用 :invalid CSS 伪类。

值

如果ValidityState符合所有约束，则为true的布尔值。

示例

显示有效性状态

以下示例检查 数字输入元素 的有效性。已使用 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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅