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的更多相关文章

  1. html5高级

    Html5高级 项目回顾 Day 01 第三阶段知识体系: (1)AJAX异步请求 数据库.PHP.HTTP.原生AJAX.jQuery中的AJAX (2)HTML5高级特性 九大新特性 (3)Boo ...

  2. js-DOM2，表单脚本

    DOM2: 1.DOM2中:创建一个完整的HTML文档 document.implementation.createHTMLDocument("new Doc"); alert(h ...

  3. JavaScript高级程序设计55.pdf

    输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...

  4. angular2 学习笔记 ( Form 表单 )

    refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...

  5. HTML5新增的一些属性和功能之一

    大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...

  6. 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本

    在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...

  7. jquery plugin 之 form表单验证插件

    基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...

  8. [H5表单]一些html5表单知识及EventUtil对象完善

    紧接着上面的文章,一开始准备一篇文章搞定,后来看到,要总结的东西还不少,干脆,把上面文章拆成两部分吧,这部分主要讲讲表单知识! 表单知识 1.Html5的autofocus属性. 有个这个属性,我们不 ...

  9. 《JavaScript 高级程序设计》读书笔记

    文章目录 第三章 基本语法 第四章 变量.作用域和内存问题 第五章 应用类型 1. Array 类型 2. RegExp 类型 3. Function 类型 4. String 类型 第六章 面向对象 ...

随机推荐

  1. 基于Kibana的可视化监控报警插件sentinl入门

    sentinl是什么 Kibi/Kibana Alert & Reporting App Watching your data, 24/7/365 sentinl是一个免费的kibana预警与 ...

  2. 持久化存储与HTTP缓存

    本文主要学习一下一些高级的HTTP知识,例如Session LocalStorage Cache-Control Expires ETag 其实主要就是涉及到了持久化存储与缓存的技术 在此之前已经学习 ...

  3. 浏览器表单自动填充默认样式 - autofill问题解决

    这不知道是个什么神仙网站,解决办法写的这么清楚,页面有这么让人舒服 https://lhajh.github.io/css/chrome/2018/04/17/The-chrome-browser-f ...

  4. 【Python之路】特别篇--Django生产环境部署

    Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. uWSGI uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中H ...

  5. （编程语言+python+变量名+垃圾回收机制）*知识点

    编程语言 从低级到高级的发展的过程 1.机器语言 计算机是基于电工作的.(基于高.低电平 1010010101011) 如果用机器语言表现一个字符的意思需要多段代码的行.但是计算机读取的快. 所以机器 ...

  6. 「HEOI2014」大工程

    问题分析 首先不难想到是虚树.建完虚树需要保持节点间原先的距离关系. 然后总距离和最小距离用树形DP求,最大距离用两遍dfs即可.注意统计的时候只对关键点进行统计. 真是麻烦 参考程序 ac的时候是l ...

  7. Miller Robin大素数判定

    Miller Robin算法 当要判断的数过大,以至于根n的算法不可行时,可以采用这种方法来判定素数. 用于判断大于2的奇数(2和偶数需要手动判断),是概率意义上的判定,因此需要做多次来减少出错概率. ...

  8. docker的数据管理

    容器中管理数据主要有两种方式: 1.数据卷:容器内数据直接映射到本地宿主机. 2.数据卷容器:使用特定容器维护数据卷 数据卷: 数据卷是一个可供容器使用的特殊目录,他将主机操作系统目录直接映射进容器. ...

  9. eureka 服务实例实现快速下线快速感知快速刷新配置解析

    Spirng Eureka 默认配置解读 默认的Spring Eureka服务器,服务提供者和服务调用者配置不够灵敏,总是服务提供者在停掉很久之后,服务调用者很长时间并没有感知到变化.或者是服务已经注 ...

  10. 在sed中引入shell变量的四种方法

    1.eval sed ’s/$a/$b/’ filename2.sed "s/$a/$b/" filename3.sed ’s/’$a’/’$b’/’ filename 4.sed ...