ValidityState: valid 属性
ValidityState
接口的只读属性 valid
指示一个 ValidityState
对象的 <input>
元素的值是否满足所有验证约束,因此被认为是有效的。
值
如果 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 |
浏览器兼容性
加载中…
另见
- ValidityState badInput, customError 属性。
- 约束验证
- 表单:数据表单验证