HTML5--表单新特性使用自定义错误提示消息validity属性
一、HTML5表单新特性
二、自定义错误是什么?
三、如何自定义错误信息?
<form action="">用户名: <input type="text" id="user"/><br/><input type="submit" value="提交"/>
</form>
valid:true//当前输入是否有效
badInput: false //输入无效,如number框输入abc
patternMismatch: false //正则表达式验证失败
rangeOverflow: false //输入值超过max的限定
rangeUnderflow: false //输入值小于min的限定
tooLong : false //输入的字符数超过maxlength
tooShort : false //输入的字符数小于minlength
stepMismatch : false //输入的数字不符合step限制
typeMismatch : false //输入值不符合email、url的验证
valueMissing : false //未输入值,违反了required要求
customError : false //是否存在自定义错误
上述属性值的特性:
(1)只要有一个验证方面错误,某个属性就为true,valid值为false
(2)只有没有任何验证错误,所有的属性都为false,valid才能为true
(3)上述的每个错误在浏览器内部都有一个预定义的错误提示消息
(4)所有的错误消息中,只要存在“自定义的错误消息”,浏览器只显示自定义的错误消息,优先级高于浏览器预定义的错误消息
(5)当前没有自定义错误消息,所以customError : false
所以重点来了,我们怎么样自定义错误消息?
设置自定义错误消息的方法:
input.setCustomValidity('错误提示消息');
//这个相当于将input.validity.customError:true
取消自定义错误消息的方法:
input.setCustomValidity("");
//这个相当于将input.validity.customError:false
四、具体演示
<form action="">用户名: <input type="text" id="user" required/><br/><input type="submit" value="提交"/>
</form><script>var user =document.getElementById("user");user.setCustomValidity("大哥!!!用户名必须填!!!");
</script>
user.setCustomValidity("");
HTML5--表单新特性使用自定义错误提示消息validity属性相关推荐
- html5表单新特性
html5表单新特性 学习的笔记,记录备忘. 效果图: 代码: <!DOCTYPE html> <html><head><meta charset=" ...
- html5表单验证没有效果,HTML5表单验证特性(知识点小结)
前台提交信息到后台一般两种常见提交方式: Form表单提交 和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持 解决方案: 可以在date ...
- html 表单自定义属性,HTML5基础知识汇总_(2)自定义属性及表单新特性
自定义属性data-* 说起这个属性,其实现在很常见了;怎么说呢,因为在一些框架都能看到他的身影!!! 比如Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然是跟随 ...
- html5表单新功能解析,解析HTML5表单新功能-HTML5
本文我们将详细介绍一下HTML 5中对表单功能的更新.希望能帮助更多的前端人学习这门毋庸置疑是新趋势的技术. 一.表单结构更自由 XHTML中需要放在form之中的诸如inpu/button/sele ...
- HTML5有哪些表单新特性
21. 检测属性支持 除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持,如: 22. Mark元素 把元素看做是高亮的作用,当我选择一段文字的时候,javascr ...
- HTML5新的解析顺序,HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. HTML5表单新功能解析 ...
- html5密码确认属性,HTML5表单及其验证【html自带属性验证】
HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架, ...
- html5表单密码验证及提示,HTML5表单及其验证(示例代码)
1.输入型控件 Input type 用途 说明 email 电子邮件地址文本框 url 网页URL文本框 number 数值的输入域 属性 值 描述 max number 规定允许的最大值 min ...
- HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
- html5 表单必填项,javascript - HTML5表单必填属性。 设置自定义验证消息?
javascript - HTML5表单必填属性. 设置自定义验证消息? 我有以下HTML5表格:[http://jsfiddle.net/nfgfP/] ***** 目前当我在空白时点击输入时,会出 ...
最新文章
- 新的工作电脑 神州优雅A550-i7
- Android下载图片路径问题
- RxSwift之深入解析场景特征序列的使用和底层实现
- WebKit 布局的标准和概念
- SAP Kyma和Marketing Cloud的连接 - Marketing Cloud里的配置
- python多线程多进程
- 托管型呼叫中心与自建型呼叫中心的区别
- C#反射——模仿BeanUtil属性复制
- hadoop在windows上的环境配置及HDFS API编程示范
- PDF 文档解除密码
- AD快捷键,及一些基本操作设置总结
- 1.13 08特殊日历计算
- 天擎终端安全管理系统未授权访问SQL注入漏洞
- 计算机组成原理2017答案,计算机组成原理答案2017(西南大学).docx
- 使用Python脚本读取fasta文件
- 什么是DPTR寄存器
- 深信服下一代防火墙组网介绍及配置
- 云队友丨王兴的无限游戏:很多人误认为干掉对手,就胜利结束
- 代理IP有哪些协议?
- 安卓:Fragment的懒加载