JavaScript验证API
验证API
两个方法：
checkValidity():如果input元素中的数据是合法的返回true，否则返回false；
setCustomValidity():设置input元素的validationMessage属性，用于自定义错误提示信息的方法
使用setCustomValidity设置自定义后提示后，validity.customError就会变成true，checkValidity总会返回false。如需重新判断需要取消自定义提示：
setCustomValidity('')
setCustomValidity(null)
setCustomValidity(undefined)
checkValidity()方法
例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript 验证API</title>
6 </head>
7 <body>
8 <p>输入数字并验证</p>
9 <input type="number" id="id1" min="100" max="300" required>
10 <button onclick="myFunction()">验证</button>
11 <p id="demo"></p>
12 </body>
13 <script>
14 function myFunction(){
15 // 获取用户输入对象
16 var inpobj = document.getElementById("id1");
17 console.log(inpobj)
18 // checkValidity():如果用户输入是合法的，返回true，否则返回false
19 if(inpobj.checkValidity() == false){
20 document.getElementById("demo").innerHTML=inpobj.validationMessage;
21 }
22 else{
23 document.getElementById("demo").innerHTML="nice got it..."
24 }
25 }
26 </script>
27 </html>
约束验证dom属性
| 属性 | 描述 |
|---|---|
| validity | 布尔属性值，返回 input 输入值是否合法 |
| validationMessage | 浏览器错误提示信息 |
| willValidate | 指定 input 是否需要验证 |
validity属性
| 属性 | 描述 |
|---|---|
| customError | 设置为 true, 如果设置了自定义的 validity 信息。 |
| patternMismatch | 设置为 true, 如果元素的值不匹配它的模式属性。 |
| rangeOverflow | 设置为 true, 如果元素的值大于设置的最大值。 |
| rangeUnderflow | 设置为 true, 如果元素的值小于它的最小值。 |
| stepMismatch | 设置为 true, 如果元素的值不是按照规定的 step 属性设置。 |
| tooLong | 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。 |
| typeMismatch | 设置为 true, 如果元素的值不是预期相匹配的类型。 |
| valueMissing | 设置为 true，如果元素 (required 属性) 没有值。 |
| valid | 设置为 true，如果元素的值是合法的。 |
实例：如果输入值大于100，显示一个信息：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript dom属性之validity属性</title>
6 </head>
7 <p>输入数字并点击验证按钮：</p>
8 <input type="number" id="id1" max="100">
9 <button onclick="myFunction()">验证</button>
10 <p>如果输入的值大于100，（max属性）会显示错误信息</p>
11 <p id="demo"></p>
12 <script>
13 function myFunction(){
14 if(document.getElementById("id1").validity.rangeOverflow){
15 txt = "输入的值太大"
16 }else{
17 txt = "输入正确"
18 }
19 document.getElementById("demo").innerHTML = txt;
20 }
21 </script>
22 </html>
那么，如果输入的值小于100，即使用validity.rangeUnderflow()方法
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript dom属性之validity属性1</title>
6 </head>
7 <body>
8 <p>输入数字并点击验证按钮：</p>
9 <input type="number" min="100" id="id1" required>
10 <button onclick="myFunction()">验证</button>
11 <p>如果输入的数字小于100（input的min属性）会显示错误信息</p>
12 <p id="demo"></p>
13 <script>
14 function myFunction(){
15 var txt = "";
16 var inpObj = document.getElementById("id1");
17 console.log(isNumberic(inpObj.value))
18 if(!isNumberic(inpObj.value)){
19 txt = "你输入的不是数字"
20 }
21 else if(inpObj.validity.rangeUnderflow){
22 txt = "你输入的值太小了"
23 }
24 else{
25 txt = "输入正确"
26 }
27 document.getElementById("demo").innerHTML=txt
28 }
29 // 判断是否位数字
30 function isNumberic(n){
31 return !isNaN(parseFloat(n)) && isFinite(n);
32 }
33 </script>
34 </body>
35
36
37
38 </html>
JavaScript验证API的更多相关文章
- JavaScript 验证API
约束验证 DOM 方法 Property Description checkValidity() 如果 input 元素中的数据是合法的返回 true,否则返回 false. setCustomVal ...
- Javascript高级编程学习笔记（78）—— 表单（6）HTML约束验证API
自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text&q ...
- javascript的api设计原则
前言 本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块.系卤煮自己总结的一些经验和教训.本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来.很难做到 ...
- 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
× 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...
- 使用 JavaScript File API 实现文件上传
概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScr ...
- Eclipse去除JavaScript验证错误
这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍.在Eclipse中,js文件常常会报错.可以通过如下几个步骤解决 第一步: 去除eclipse的JS验证: 将wind ...
- JavaScript验证正则表达式大全
JavaScript验证正则表达式大全,搜集最全的JavaScript验证正则表达式,开始查看吧,这里的都是正则表达式的例子,具体和函数结合的使用方法,还请查看下篇文章<JavaScript使用 ...
- 【转】Eclipse去除js(JavaScript)验证错误
这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍.在Eclipse中,js文件常常会报错.可以通过如下几个步骤解决 第一步:去除eclipse的JS验证:将window ...
- javascript 验证 yyyy-MM-dd HH:mm:ss 的正则表达式
原文:javascript 验证 yyyy-MM-dd HH:mm:ss 的正则表达式 ^((\d{2}(([02468][048])|([13579][26]))[\-\/\s]?((((0?[13 ...
- 验证API
验证API 本篇定位在数据入口的验证 普通的DataAnnotation验证 基于场景的DataAnnotation验证 可修改的外置式DataAnnotation验证 SUMMARY 最终调用时的用 ...
随机推荐
- vue引入高德地图
一,下载 npm install vue-amap --save 二,main.js文件内引入 import VueAMap from 'vue-amap' Vue.use(VueAMap); // ...
- react项目中如何出现config文件夹
答案:运行 npm run eject 即可出现config文件夹 原因: 在package.json中:只有三个依赖,分别是react,react-dom,react-scripts,依赖为什么 ...
- 或许是市面上最强的 Mock 工具
背景 在开发过程中,由于后端与前端并行开发,或者前端需要等待后台开发,难以保证对接效率,同时即使用开发好的 API 对接,也有可能一个 API 不通就阻塞了整个软件的对接工作.同时对软件的敏感度也很高 ...
- JavaScript：对象：如何去遍历输出一个对象的属性？语句for-in
使用for-in的for循环语句,可以去遍历一个对象的属性,这类似于Java的增强for循环: 但是注意,这并不能遍历对象的所有属性,有些隐藏的属性,是无法遍历出来的,虽然我们可以通过控制台去查看这些 ...
- prometheus-监控docker服务器
1. prometheus-监控docker服务器 prometheus-监控docker服务器 cAdvisor(Container Advisor):用于收集正在运行的容器资源使用和性能信息. 项 ...
- 【深入浅出Sentinel原理及实战】「基础实战专题」零基础实现服务流量控制实战开发指南（2）
你若要喜爱你自己的价值,你就得给世界创造价值. Sentinel的组成部分 Sentinel 主要由以下两个部分组成. Sentinel核心库(Java客户端) :Sentinel的核心库不依赖任何框 ...
- [python] 基于blind-watermark库添加图片盲水印
blind-watermark是一个能够给图片添加/解析基于频域的数字盲水印的Python库.图像水印image watermark是指在图片里添加文本或图形,以标记图片的来源.但是图像水印会破坏原图 ...
- MySQL 索引的创建、删除
MySQL中索引的创建有三种方法,索引的删除有两种方法. 一.创建索引 (1)使用create index # 1.创建普通索引 create index 索引名 on 表名 (列名[(限制索引长度) ...
- [Codeforces Round #816 (Div. 2)] D. 2+ doors
这次Div.2比之前我打的有些要难啊,前三道题就耗了好多时间,D题干脆摆烂了... 还是太逊了 对于一个\(x\),有\(x|y_i=z_i\),那么我们设\(num[x]=z_1\)&\(z ...
- 2023 年该学点什么技术？「GitHub 热点速览 v.23.03」
春节期间,小鱼干读了一篇万字回顾数据库行业的文章,在文字缝隙里我看见了两个词:AI+ 和数据两个词(当然数据是废话,毕竟是一个数据库的回顾文).在 GitHub 上热点趋势上,可见到 AI+ 的身影, ...