JavaScript-Runoob:JavaScript 验证 API
时间:2020-07-11
本文章向大家介绍JavaScript-Runoob:JavaScript 验证 API,主要包括JavaScript-Runoob:JavaScript 验证 API使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
ylbtech-JavaScript-Runoob:JavaScript 验证 API |
1.返回顶部 |
1、
JavaScript 验证 API
约束验证 DOM 方法
Property | Description |
---|---|
checkValidity() | 如果 input 元素中的数据是合法的返回 true,否则返回 false。 |
setCustomValidity() |
设置 input 元素的 validationMessage 属性,用于自定义错误提示信息的方法。 使用 setCustomValidity 设置了自定义提示后,validity.customError 就会变成true,则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示,方式如下: setCustomValidity('')
setCustomValidity(null)
setCustomValidity(undefined)
|
以下实例如果输入信息不合法,则返回错误信息:
checkValidity() 方法
<input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">验证</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 | 浏览器错误提示信息 |
willValidate | 指定 input 是否需要验证 |
Validity 属性
input 元素的 validity 属性包含一系列关于 validity 数据属性:
属性 | 描述 |
---|---|
customError | 设置为 true, 如果设置了自定义的 validity 信息。 |
patternMismatch | 设置为 true, 如果元素的值不匹配它的模式属性。 |
rangeOverflow | 设置为 true, 如果元素的值大于设置的最大值。 |
rangeUnderflow | 设置为 true, 如果元素的值小于它的最小值。 |
stepMismatch | 设置为 true, 如果元素的值不是按照规定的 step 属性设置。 |
tooLong | 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。 |
typeMismatch | 设置为 true, 如果元素的值不是预期相匹配的类型。 |
valueMissing | 设置为 true,如果元素 (required 属性) 没有值。 |
valid | 设置为 true,如果元素的值是合法的。 |
实例
如果输入的值大于 100,显示一个信息:
rangeOverflow 属性
<input id="id1" type="number" max="100"> <button onclick="myFunction()">验证</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; if (document.getElementById("id1").validity.rangeOverflow) { txt = "输入的值太大了"; } document.getElementById("demo").innerHTML = txt; } </script>
如果输入的值小于 100,显示一个信息:
rangeUnderflow 属性
<input id="id1" type="number" min="100" required> <button onclick="myFunction()">OK</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; var inpObj = document.getElementById("id1"); if(!isNumeric(inpObj.value)) { txt = "你输入的不是数字"; } else if (inpObj.validity.rangeUnderflow) { txt = "输入的值太小了"; } else { txt = "输入正确"; } document.getElementById("demo").innerHTML = txt; } // 判断输入是否为数字 function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } </script>
2、
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
1、
2、
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
原文地址:https://www.cnblogs.com/storebook/p/13285256.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 题目 2229: [蓝桥杯][算法训练]最大最小公倍数
- 武汉工程大学2020GPLT选拔赛(重现赛)详细代码讲解
- 用邻接链表存图 详讲
- strstr函数的详细讲解
- ICPC Pacific Northwest Regional Contest 2019 C D E M 题解
- wordpress:您的主机禁用了mail()函数,找回用户名和密码
- AtCoder Beginner Contest 166 A ~~E
- AtCoder Beginner Contest 165 A ~~D
- 离散化思想详细讲解
- AtCoder Beginner Contest 164---D
- 问题 1511: [蓝桥杯][算法提高VIP]复数求和
- 计算机网络--概论
- 因式分解(计蒜网)
- 区间合并(计蒜网)
- AtCoder Beginner Contest 161 A~~F