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. JavaWeb_(Struts2框架)struts.xml核心配置、动态方法调用、结果集的处理

    此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...

  2. SVN_SVN的基本认识

    SVN是什么? svn是Subversion的简称,是一个开源的代码版本控制系统,svn就是用于多人共同开发同一个项目,达到资源共用目的工具. 版本控制是什么? 版本控制(Revision contr ...

  3. 2016 Multi-University Training Contest 4 部分题解

    1001,官方题解是直接dp,首先dp[i]表示到i位置的种类数,它首先应该等于dp[i-1],(假设m是B串的长度)同时,如果(i-m+1)这个位置开始到i这个位置的这一串是和B串相同的,那么dp[ ...

  4. 关于数据上传阿里云MaxCompute调研

    1.背景 当前的数据存储基于mysql库表存储形式,目前已经无法满足愈加增大的数据存储需求,新项目基于Maxcompute数据仓库架构,需要将统计日志上传Maxcompute,本文对Maxcomput ...

  5. python3 selenium使用

    其实这个就相当于模拟人的点击事件来连续的访问浏览器.如果你玩过王者荣耀的话在2016年一月份的版本里面就有一个bug. 安卓手机下载一个按键精灵就可以在冒险模式里面设置按键,让手机自动玩闯关,一局19 ...

  6. Data Science Competition中的工具汇总

    除了基础的pandas,scikit-learn,numpy,matplotlib,seaborn以外 ( 1 ) category_encoders github 属于scikit-learn co ...

  7. Http请求优化

    Http请求优化 我们在做项目开发或多或少的都会使用SpringCloud,其中做远程调度的时候会将HTTP请求Http请求优化. HTTP请求Client存在很多种. JDK原生的URLConnec ...

  8. sql把一段时间分割成周，月，季度，年的时间段

    --本周 select TO_CHAR(CREATE_DATE ,'yyyy-MM-dd')as NEW_DATE , TO_CHAR(trunc(CREATE_DATE, ,'yyyy-MM-dd' ...

  9. webpack搭建多页面系统（一）：对webpack 构建工具的理解

    为什么使用webpack构建工具? 1.开发效率方面: 在一般的开发过程中,分发好任务后,每个人完成自己单独的页面,如果有的人开发完成之后,接手别人的任务,就有可能造成开发时候的冲突. 如果利用模块化 ...

  10. springboot 热部署替代方式

    因为使用的 idea springboot2.2.0 snapshot版本, 常规的devtools方法实在是实现不了热部署,所以采用手动update的方法更新,测试可以成功更新resource里面的 ...