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 最终调用时的用 ...
随机推荐
- 数据库MySQL(完结)
SQL注入问题 简介 针对SQL注入的攻击行为可描述为通过用户可控参数中注入SQL语法,破坏原有SQL结构,达到编写程序意料之外结果的攻击行为. 其成因可归结为以下两个原理叠加造成: 程序编写者在处理 ...
- TypeError: __str__ returned non-string (type WebStepInfo)
错误代码: class CaseStep(models.Model): id = models.AutoField(primary_key=True) casetep = models.Foreign ...
- angular--路由导航三种方法
- html内容超宽后，缩小可视区域后，会引起部分背景色宽度出现显示异常情况，解决如下：
- VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动
本文为横向轮播,纵向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...
- 实操好用~~~~~antd 中 Table表格动态合并~~~
我写了两种方法 一种是前端处理数据渲染 一种是后端处理数据渲染 数据结构略有不同 下面上代码 <template> <page-view :title="title&quo ...
- 12月9日内容总结——静态文件以及配置、form表单属性的作用、request对象、python连接数据库和Django连接数据库、ORM的基础知识介绍
目录 一.静态文件 1.静态文件概念 2.资源访问 3.静态文件资源访问 二.静态文件相关配置 1.接口前缀 2.接口前缀动态匹配 三.form表单 action属性 method属性 四.reque ...
- vivo 自研Jenkins资源调度系统设计与实践
作者:vivo 互联网服务器团队- Wu Qinghua 本文从目前业界实现Jenkins的高可用的实现方案,分析各方案的优缺点,引入vivo目前使用的Jenkins高可用方案,以及目前Jenkins ...
- mysql04-管理mysql常用指令
https://www.runoob.com/mysql/mysql-administration.html 1.常用指令 USE 数据库名 :选择要操作的Mysql数据库,使用该命令后所有Mysql ...
- .NET周报 【2月第2期 2023-02-11】
国内文章 SQLSERVER的truncate和delete有区别吗? https://mp.weixin.qq.com/s/wTIeW8rjj3cRzoaQcg2sOw 在面试中我相信有很多朋友会被 ...