约束验证DOM方法
| 属性 | 描述 |
|---|---|
| checkValidity() | 如果输入元素包含有效的数据，则返回true。 |
| setCustomValidity() | 设置一个输入元素的validationMessage财产。 |
如果输入字段包含无效数据，显示一条消息：
该checkValidity（）方法
<input id="id1" type="number" min="100" max="300">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj =
document.getElementById("id1");
if (inpObj.checkValidity()
== false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script> 试一试» 约束验证DOM属性
| 属性 | 描述 |
|---|---|
| validity | 包含与一个输入元件的有效性布尔属性。 |
| validationMessage | 包含当该有效性是假的浏览器将显示消息。 |
| willValidate | 表示如果输入的元素将被验证。 |
效度属性
输入元素的有效性属性包含了一些相关的数据的有效性属性：
| 属性 | 描述 |
|---|---|
| customError | 设置为true，如果设置自定义有效性消息。 |
| patternMismatch | 设置为true，如果一个元素的值不符合其模式属性。 |
| rangeOverflow | 设置为true，如果一个元素的值低于其最大属性越大。 |
| rangeUnderflow | 设置为true，如果一个元素的值低于其最小属性。 |
| stepMismatch | 设置为true，如果元素的值是每一步的属性无效。 |
| tooLong | 设置为true，如果一个元素的价值超过其最大长度属性。 |
| typeMismatch | 设置为true，如果元素的值是每它的类型属性无效。 |
| valueMissing | 设置为true，如果一个元素（必需属性）没有价值。 |
| valid | 设置为true，如果一个元素的值是有效的。 |
例子
如果在一个输入字段的数量大于100（与输入的max属性）时，显示一条消息：
该rangeOverflow物业
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Value too large";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
试一试» 如果在输入字段中的数小于100（输入的min属性），则显示一条消息：
该rangeUnderflow物业
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow) {
txt = "Value too small";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
试一试»