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 最终调用时的用 ...
随机推荐
- SpringBoot 自动装配的原理分析
关于 SpringBoot 的自动装配功能,相信是每一个 Java 程序员天天都会用到的一个功能,但是它究竟是如何实现的呢?今天阿粉来带大家看一下. 自动装配案例 首先我们通过一个案例来看一下自动装配 ...
- Karmada多云多集群生产实践专场圆满落幕
摘要:CNCF Karmada社区Cloud Native Days China 2022南京站成功举办. 本文分享自华为云社区<Karmada多云多集群生产实践专场圆满落幕|Cloud Nat ...
- 解决Win10更新后远程桌面提示CredSSP加密Oracle修正的问题
1.以管理员身份打开cmd,运行命令提示符:2.执行REG ADD HKLM\Software\Microsoft\Windows\CurrentVersion\Policies\System\Cre ...
- SpringCloud微服务框架复习笔记
SpringCloud微服务框架复习笔记 什么是微服务架构? 微服务是一种软件开发技术,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为用户提供最终价值.每个服务运行在其独立的进 ...
- 1、mybatis逆向工程
mybatis逆向工程可以针对单表自动生成mybatis执行所需要的mapper.java.mapper.xml代码(dao层),可以让程序员将更多的精力放在繁杂的业务逻辑上(service层与con ...
- GitHub - 电脑经常无法访问GitHub页面
来自这里 1.打开Dns检测|Dns查询 - 站长工具2.在检测输入栏中输入http://github.com官网3.把检测列表里的TTL值最小的IP输入到host里,并对应写上github官网域名. ...
- 终于弄明白了 RocketMQ 的存储模型
RocketMQ 优异的性能表现,必然绕不开其优秀的存储模型 . 这篇文章,笔者按照自己的理解 , 尝试分析 RocketMQ 的存储模型,希望对大家有所启发. 1 整体概览 首先温习下 Rocket ...
- strapi系列-如何去除接口里的attributes以及 data key，配置关联数据等
我们先来创建一个接口,然后看一下正常接口返回的数据格式是什么样子 创建表以及字段 添加一条数据 配置接口权限 我暂时给了这个接口PUBLIC权限,用来测试 使用postman进行接口测试 我们可以看到 ...
- 构建api gateway之 http路由实现
http路由 路由是指路由器从一个接口上收到数据包,根据数据包的目的地址进行定向并转发到另一个接口的过程. 而这里的http路由其实等同于web开发中,根据http相关参数(比如url.http me ...
- .Net7运行模型之托管Main函数的调用
前言: .Net7的CLR最具特色的一个地方,就是运行模型.因为它主宰了整个CLR的运行过程. 又因为其庞大的代码量,有的几十万行甚至百万行.所以理解起来非常不容易.本篇拆分来看下,里面一个细节Mai ...