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. sql关联查询更新速度慢的问题

    原语句 update B b set b.fid = (select f.id from F f where f.bid = b.id) ; 可以考虑用 begin for f in (select ...

  2. Redux应用多人协作的思路和实现

    先上Demo动图,效果如下: 基本思路 由于redux更改数据是dispatch(action),所以很自然而然想到以action作为基本单位在服务端和客户端进行传送,在客户端和服务端用数组来存放ac ...

  3. luoguP2863 [USACO06JAN]牛的舞会The Cow Prom

    P2863 [USACO06JAN]牛的舞会The Cow Prom 123通过 221提交 题目提供者 洛谷OnlineJudge 标签 USACO 2006 云端 难度 普及+/提高 时空限制 1 ...

  4. 灵魂拷问：Java如何获取数组和字符串的长度？length还是length()？

    限时 1 秒钟给出答案,来来来,听我口令:"Java 如何获取数组和字符串的长度?length 还是 length()?" 在逛 programcreek 的时候,我发现了上面这个 ...

  5. Codeforces Gym 101630J Travelling from Petersburg to Moscow (最短路)

    题目链接 http://codeforces.com/gym/101630/attachments 题解 zyb学长的题. 先枚举第\(k\)大的边权,设其边权为\(x\),然后把每条边边权减掉\(x ...

  6. Marked

    哈夫曼树 2-sat问题 线性代数基础 矩阵和行列式基础 可并堆1 可并堆2 概率与期望概念 Kruskcl重构树1 Kruskcl重构树2 匈牙利算法 带权并查集 C++参考手册 尺取法 AC自动机 ...

  7. SpringMVC接收请求参数和页面传参

    接收请求参数: 1,使用HttpServletRequest获取 @RequestMapping("/login.do") public String login(HttpServ ...

  8. 修复Long类型太长转为JSON格式的时候出错的问题

    这边项目要求ID是自动生成的20位Long型数字 但是实际中应用的时候回发生一种问题就是,查询的时候debug的时候数据都正常,但是返回前端的时候就会发现,数据错误了. 大体就是类似于下面的这种情况. ...

  9. Python编程中NotImplementedError的使用

    Python编程中raise可以实现报出错误的功能,而报错的条件可以由程序员自己去定制.在面向对象编程中,可以先预留一个方法接口不实现,在其子类中实现.如果要求其子类一定要实现,不实现的时候会导致问题 ...

  10. Robotframework之SSHLibrary库

    Robotframework之SSHLibrary库     使用robotframework做自动化测试,在流程中可能需要远程连接机器做一些简单操作,比如连接linux服务器,外面平时用的工具去连接 ...