JavaScript 验证 API

最新推荐文章于 2025-05-09 18:24:41 发布

可爱的瞌睡虫

最新推荐文章于 2025-05-09 18:24:41 发布

阅读量291

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_42848534/article/details/107164899

版权

本文介绍了JavaScript中的约束验证API，包括checkValidity()方法用于检查输入数据的有效性，以及一系列合法性属性，如rangeOverflow和rangeUnderflow，用于在输入数值超过或低于设定范围时触发验证反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

约束验证 DOM 方法

在这里插入图片描述

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 属性

在这里插入图片描述

合法性属性

input 元素的 validity 属性包含了与数据合法性相关的一系列属性：
在这里插入图片描述

实例

如果输入字段中的数字大于 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>