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. stm32 cubemx hal dma uart参考例程，发送和接收

    参考:https://blog.csdn.net/toopoo/article/details/80012317https://blog.csdn.net/morixinguan/article/de ...

  2. Axure RP 8 破解汉化（实测可用）

    Axure的安装教程初学乍练,从安装应用程序开始1.下载 下载地址:https://www.axure.com.cn/3510/ 2.破解:注册码(源于博主“前端大白兔”,原博客网址:http://b ...

  3. Jenkins-邮件模板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. fegin熔断autowired失败

    在SpringBootApplication中加入 @EnableFeignClients(basePackages = "com.supplychain")指定熔断的路径就可以了

  5. js中prototype和constructor的认识

    最初对js中 object.constructor 的认识: 我们都知道,在JS中有一个function的东西.一般人们叫它函数.比如下面的代码 function Person(name)    {  ...

  6. 前端Web浏览器基于Flash如何实时播放监控视频画面（三）之使用ffmpeg‘推流’

    本片文章只是起到抛砖引玉的作用,能从头到尾走通就行,并不做深入研究.为了让文章通俗易懂,尽量使用白话描述. 0x001: 下载ffmpeg 开源免费的推流软件有很多,这里以 ffmpeg 为例.ffm ...

  7. java+根据多个url批量下载文件

    1.基本流程 当我们想要下载网站上的某个资源时,我们会获取一个url,它是服务器定位资源的一个描述,下载的过程有如下几步: (1)客户端发起一个url请求,获取连接对象. (2)服务器解析url,并且 ...

  8. cogs服务点设置（不凶，超乖） x

    cogs3. 服务点设置 ★   输入文件:djsa.in   输出文件:djsa.out   简单对比时间限制:1 s   内存限制:128 MB 问题描述为了进一步普及九年义务教育,政府要在某乡镇 ...

  9. Fire Game （FZU 2150）（BFS）

    题解:一开始想错了,以为只要烧完就是那个答案,但是这不是最优的结果,需要每两个点都bfs一遍,找到如果能够全部烧完,找到花费时间最小的,如果不能return -1.在bfs的时候,记录答案的方法参考了 ...

  10. [CSP-S模拟测试]:凉宫春日的忧郁（乱搞）

    题目传送门(内部题101) 输入格式 第一行输入一个整数$T$,表示数据组数. 接下来$T$行,每行两个数$X,Y$,表示$T$组数据. 输出格式 输出共有$T$行,对于每一组数据,如果$X^Y\le ...