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. MyBatis Demo

    什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索.MyBat ...

  2. 使用jmeter发送put请求的三种方式

    之前在前公司使用jmeter调试接口时,由于都是get和post请求,所以一直是顺风顺水的,毫无阻拦在短时间内调试完所有接口. 但是呢,在换到新公司后,发现接口请求是多式多样的,get.post必须有 ...

  3. solr admin界面的监控

    这里可以看到,solr的版本,lucene的版本,jvm的版本,CPU核数,jvm启动参数,还有物理内存占用,交换空间占用,jvm内存占用. 这里可以看到每个core的情况. 这里可以看到java的所 ...

  4. Zabbix Server安装指南

    监控模板网站 在https://share.zabbix.com/,提供了各种各样的监控模板,可以自行搜索,套用.

  5. inclusion_tag模块

    目录 inclusion_tag模块 inclusion_tag模块 1.当页面上某一块区域的内容需要在多个页面上展示的使用,并且该区域的内容需要通过传参数才能正常显示,那么我们可以优先考虑inclu ...

  6. TCP/IP 三次握手和四次挥手

    TCP 三次握手 作用:建立TCP连接 1.三次握手是客户端先发起请求到服务器,此时服务器处于LISTEN监听状态,A会先发送一个连接请求的报文---SYN=1,ACK=0,seq=x ,这个包也称为 ...

  7. Prism框架实战——订餐软件

    参考B站刘铁猛老师的订餐软件https://www.bilibili.com/video/av29782724?from=search&seid=6787438911056306128 环境: ...

  8. 从零开始入门 K8s | Kubernetes 调度和资源管理

    作者 | 子誉  蚂蚁金服高级技术专家 关注"阿里巴巴云原生"公众号,回复关键词"入门",即可下载从零入门 K8s 系列文章 PPT. Kubernetes 调 ...

  9. Python基础之Python语言类型

    编程语言主要从以下几个角度进行分类: 编译型和解释型 静态语言和动态语言 强类型定义语言和弱类型定义语言 编译和解释的区别是什么? 编译器把源程序的每一条语句都编译成机器语言,并保存成二进制文件,这样 ...

  10. AcWing：112. 雷达设备（贪心 + 笛卡尔坐标系化区间）

    假设海岸是一条无限长的直线,陆地位于海岸的一侧,海洋位于另外一侧. 每个小岛都位于海洋一侧的某个点上. 雷达装置均位于海岸线上,且雷达的监测范围为d,当小岛与某雷达的距离不超过d时,该小岛可以被雷达覆 ...