欢迎回家
我们一直在改变

JavaScript 表单 API JS表单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>

原文链接: https://www.w3school.com.cn/js/js_validation_api.asp

赞(0)
未经允许不得转载:91coding » JavaScript 表单 API
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

立即登录   注册

91CODING 小白轻松上手,大牛稳健进步

关于我们免责声明