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>

亲自试一试

VUE