首页
会员中心
到顶部
到尾部
CSS教程

JavaScript 验证 API

时间:2020/11/2 14:07:23  作者:  来源:  查看:0  评论:0
内容摘要:JavaScript 验证 APIJS 表单JS 对象定义约束验证 DOM 方法属性描述checkValidity()返回 true,如果 input 元素包含有效数据setCustomValidity()设置 input 元素的 validationMessage 属性。che...

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>

亲自试一试



相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号