Toggle navigation

JavaScript 验证 API

约束验证 DOM 方法

属性描述
checkValidity()返回 true，如果 input 元素包含有效数据
setCustomValidity()设置 input 元素的 validationMessage 属性。

checkValidity() 方法

如果输入字段包含无效的数据，显示一条消息：

<input id="id1" type="number" min="100" max="300" required>
<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包含与 input 元素的合法性相关的布尔属性。
validationMessage包含当 validity 为 false 时浏览器显示的消息。
willValidate指示是否验证 input 元素。

合法性属性

input 元素的 validity属性包含了与数据合法性相关的一系列属性：

属性描述
customError设置为 true，如果设置自定义的合法性消息。
patternMismatch设置为 true，如果元素值不匹配其 pattern 属性。
rangeOverflow设置为 true，如果元素值大于其 max 属性。
rangeUnderflow设置为 true，如果元素值小于其 min 属性。
stepMismatch当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。
tooLong设置为 true，如果元素值超过了其 maxLength 属性。
typeMismatch当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。
valueMissing设置为 true，如果元素（包含 required）没有值。
valid设置为 true，如果元素值是有效的。

实例

如果输入字段中的数字大于 100（input 元素的 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 = "值太大";
    }
     document.getElementById("demo").innerHTML = txt;
}
</script>

试一试

如果输入字段中的数字小于 100（input 元素的 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 = "值太小";
    }
     document.getElementById("demo").innerHTML = txt;
}
</script>

试一试