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 最终调用时的用 ...
随机推荐
- 盘点现在用的SqlServer 5种分页方式和拉姆达表达式分页，进来看看吧。
现在基本上大家都在使用各种轮子自带的分页,大家是否还记得sql分页怎么写? 今天我们就来盘一盘怎么写和用哪种方式写. 欢迎大家评论区讨论. 1.ROW_NUMBER() OVER()方式(SQL201 ...
- 如何使用 IdGen 生成 UID
在分布式系统中,雪花 ID 是一种常用的唯一 ID 生成算法.它通过结合时间戳.机器码和自增序列来生成 64 位整数 ID,可以保证 ID 的唯一性和顺序性. 在.Net 项目中,我们可以使用 IdG ...
- vue 单独封装分页组件
一.在components文件夹下新建 pagination.vue <template> <div class="page-wrap"> <ul&g ...
- JavaScript：控制跳转：break、continue与标签
在循环结构中,经常需要使用关键字break和continue来控制跳转: 遇到break,就会跳出循环结构,执行循环体后面的代码: 遇到continue,就会跳出本次循环,进入下一次循环: 那么,假如 ...
- 02- 快速入门MybatisPlus
创建表 现有一张 User 表,其表结构如下: id name age email 1 Jone 18 test1@baomidou.com 2 Jack 20 test2@baomidou.com ...
- CH32V307 内部10M网络工程创建流程
说明: 本次操作是基于目前MRSV1.8.0版本,以及WCH官网CH32V307-V1.8版本的例程操作. MRS链接:http://www.mounriver.com/download CH32V3 ...
- JAVA中使用最广泛的本地缓存？Ehcache的自信从何而来3 —— 本地缓存变身分布式集群缓存，打破本地缓存天花板
大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 上一篇文章中,我们知晓了如何在项目中通 ...
- 解决angular11+zorro使用table组件排序失效以及分页组件失效问题，附完整DEMO代码
关于这个排序失效问题的核心点,跟这个有关系:[nzFrontPagination]="false" 关于分页组件失效的问题,是你获取数据以后,需要给页码,页数,总条数都要重新赋值, ...
- Flutter 3.7 正式发布
新的 Flutter 稳定版加入了 Material 3 更新.iOS 平台优化及其他内容 新年伊始,由 Flutter 3.7 正式版来「打头阵」!我们与整个 Flutter 社区成员们继续在 Fl ...
- Java线程池中的execute和submit
一.概述 execute和submit都是线程池中执行任务的方法. execute是Executor接口中的方法 public interface Executor { void execute(Ru ...