input.validity
HTML5为表单提供了自带的输入规则提示
但是实际开发中,我们往往需要自定义提示消息和规则,例如限定了最大值但不要求超出时提示错误信息,这时便用到了H5提供的表单新的JS属性--validity,它是包含默认提示规则检验结果的对象
valid //当前输入是否有效
badInput //输入类型有效性
patternMismatch //正则表达式验证结果
rangeOverflow //输入值是否超过max的限定
rangeUnderflow //输入值是否小于min的限定
tooLong //输入的字符数是否超过maxlength
tooShort //输入的字符数是否小于minlength
stepMismatch //输入的数字是否符合step限制
typeMismatch //输入值是否符合email、url的验证
valueMissing //是否违反required要求
customError //是否存在自定义错误提示消息
设置自定义错误消息的方法:
input.setCustomValidity('错误提示消息');//这个相当于将input.validity.customError:true
取消自定义错误消息的方法:
input.setCustomValidity("");//这个相当于将input.validity.customError:false
input.validity的更多相关文章
- html5高级
Html5高级 项目回顾 Day 01 第三阶段知识体系: (1)AJAX异步请求 数据库.PHP.HTTP.原生AJAX.jQuery中的AJAX (2)HTML5高级特性 九大新特性 (3)Boo ...
- js-DOM2,表单脚本
DOM2: 1.DOM2中:创建一个完整的HTML文档 document.implementation.createHTMLDocument("new Doc"); alert(h ...
- JavaScript高级程序设计55.pdf
输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...
- angular2 学习笔记 ( Form 表单 )
refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...
- HTML5新增的一些属性和功能之一
大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...
- 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本
在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- [H5表单]一些html5表单知识及EventUtil对象完善
紧接着上面的文章,一开始准备一篇文章搞定,后来看到,要总结的东西还不少,干脆,把上面文章拆成两部分吧,这部分主要讲讲表单知识! 表单知识 1.Html5的autofocus属性. 有个这个属性,我们不 ...
- 《JavaScript 高级程序设计》读书笔记
文章目录 第三章 基本语法 第四章 变量.作用域和内存问题 第五章 应用类型 1. Array 类型 2. RegExp 类型 3. Function 类型 4. String 类型 第六章 面向对象 ...
随机推荐
- 记录weblogic12c通用版本在windowsXP上安装报异常的问题:java.lang.NoClassDefFoundError:
先上图: 这个可能有经验的人一眼就看出问题了,报这个错的原因是:我把安装包放在了中文目录下,本来以为安装包放在中文目录下无关紧要,但是weblogic12c就是这么神奇,不能放在中文目录下. 解决方法 ...
- router-link to 动态赋值
路由定义: 动态赋值: <router-link :to="{path:'/old_data_details/params/'+item.id}" > </rou ...
- SQLite3的安装与使用
下载地址:https://www.sqlite.org/download.html (下载相对应自已电脑的配置的数据库)(这里 我的电脑是 windows 64位操作系统) 下载完后 解压出来 sql ...
- stm32 cubemx hal dma uart参考例程,发送和接收
参考:https://blog.csdn.net/toopoo/article/details/80012317https://blog.csdn.net/morixinguan/article/de ...
- 一篇文章让您了解MQTT
转载:https://www.jianshu.com/p/de88edf8e023 什么是MQTT MQTT是基于二进制消息的发布/订阅编程模式的消息协议,最早由IBM提出的,如今已经成为OASI ...
- php类知识 self $this都只能在当前类中使用
$this是当前对象的指针,self是当前类的指针 $this只能用在成员方法中,不能存在于静态方法 self 静态方法和成员方法中都能使用 self可以访问类常量,静态属性,静态方法,成员方法--- ...
- JavaScript 中 console 的用法 -------------------引用
1.在调试 JS 代码时,很多人倾向于使用 alert() 或者 console.log() 方法来输出信息,正如某些 Java 程序员喜欢在调试代码时使用System.out.println() 输 ...
- redis异步处理
$reids = new Redis; $redis->connect('localhost',6379); $redis->auth(''); //将数组转换成字符串再存到redis中 ...
- web文件夹上传源码
文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...
- nginx 配置文件 2019-12-20
cat /etc/nginx/nginx.conf user nginx; worker_processes ; error_log /var/log/nginx/error.log warn; p ...