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 最终调用时的用 ...
随机推荐
- Django框架版本区别
目录 一:django版本区别 1.django1.X路由层使用的是url方法 2.虽然path不支持正则 但是它的内部支持五种转换器 3.五种转换器 4.除了有默认的五个转换器之外 还支持自定义转换 ...
- 可视化编排的数据集成和分发开源框架Nifi轻松入门-上
@ 目录 概述 定义 dataflow面临挑战 特性 核心概念 架构 高级概述 安装 部署 常见处理器 入门示例 概述 定义 Nifi 官网地址 https://nifi.apache.org/ Ni ...
- 网易云VIP音乐NCM文件转MP3,C语言版本。
前言 网易云的Vip音乐下载下来,格式不是mp3/flac这种通用的音乐格式,而是经过加密的ncm文件.只有用网易云的音乐App才能够打开.于是想到可不可以把.ncm文件转换成mp3或者flac文件, ...
- [数据结构]单向链表及其基本操作(C语言)
单向链表 什么是单向链表 链表是一种物理储存单元上非连续.非顺序的储存结构.它由一系列结点(链表中每一个元素称为结点)组成,结点可动态生成.每个结点包括两个部分:一个是存储数据元素的数据域,另一个是存 ...
- vulnhub靶场之VULNCMS: 1
准备: 攻击机:虚拟机kali.本机win10. 靶机:VulnCMS: 1,下载地址:https://download.vulnhub.com/vulncms/VulnCMS.ova,下载后直接vb ...
- VUE Angular通用动态列表组件-亦可为自动轮播组件-01-根据数据量自动纵向滚动,鼠标划入停止滚动
本文为纵向轮播,横向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...
- Navicat可视化软件及多表查询的方法
Navicat可视化软件及多表查询的方法 一.多表查询的两种方法 1.连表操作 1.内连接 inner join ----->> 只连接两张表中公有的数据部分 select * from ...
- Windows喝水记录工具v2.0
Windows喝水记录工具v2.0 作者以前基本不喝水,后面体检出来身体出现了一些问题(肾结晶什么的),多喝水可以减轻甚至痊愈,由于没有喝水的习惯怕喝多或者喝少,所以做了这个桌面小工具,喝一杯记录一下 ...
- 腾讯出品小程序自动化测试框架【Minium】系列（六）常见组件的处理
写在前面 我发现一件神奇的事,当你学一门新技术或者新的知识点遇到不会的时候,真的可以先放一放,第二天再去学习,也许说不定也就会了. 为什么这么说? 昨天文章断断续续的写了近一天,有一个组件不认识,自然 ...
- DJI Flight Simulator 无人机模拟器 功能介绍与使用说明
0 前言 无人机是当前非常火热的"相机设备",而大疆又是其中翘楚,功能丰富,可以说是一个将带着云台的智能手机放到了天空中.如果你有自己玩过旋翼无人机航模的话,可能会体会到大疆的另一 ...