H5(一)
HTML5目前最新的规范(标准)是2014年10月推出
2005年左右出现HTML5版本(非标准)
W3C组织(两个组织定义H5规范)
学习(研究)HTML5是学习未来(将来主流)
HTML版本 - 第一阶段主要学习还是4版本(包含5版本)
<header><nav>
HTML5版本之后,声明不再出现版本信息
有意地版本,以后可能不再会有新版本
HTML5的规范内容实时更新
注意
HTML5永远都不可能离开javascript.
HTML5在移动端支持好于PC端
HTML5新表单
input新类型
email类型 - 验证是否包含"@"
url类型 - 验证是否包含"http://"
tel类型 - 只在移动端显示
number类型
range类型
date类型
color类型
表单新元素
datalist元素
progress元素
meter元素
output元素
表单新属性
placeholder - 提供默认提示内容
multiple - 允许输入多个值
多个值之间使用","
autofocus - 自动获取焦点
form - 允许表单元素定义在表单之外
表单新验证
验证属性
required属性
验证当前元素值是否为空
pattern属性
使用正则表达式验证当前元素值是否匹配
注意 - 并不能验证当前元素值是否为空
min和max属性
验证当前元素值最小值或最大值
一般适用于number、range等元素
minlength和maxlength属性
minlength - 验证当前元素值的最小长度
输入值时,允许输入小于指定值
提交表单时,验证元素值最小长度
注意
minlength并不是HTML5新属性
maxlength - 验证当前元素值的最大长度
输入值时,长度不能大于指定值
validity属性
表单验证HTML5提供一种有效状态
有效状态通过validityState对象获取到
validityState对象可通过validity属性得到
验证(有效)状态
validityState对象提供了一系列的有效状态
通过这些有效状态,进行判断
注意
所有验证状态必须配合上述的验证属性使用
作用
用来替换原本手工实现的逻辑
验证状态
valid
作用 - 判断当前元素值是否正确
注意
该状态返回true,表示验证成功
该状态返回false,表示验证失败
valueMissing
作用 - 判断当前元素值是否为空
用法 - 配合required属性使用
typeMismatch
作用 - 判断当前元素值的类型是否匹配
用法 - 配合email、number、url等
patternMismatch
作用 - 判断当前元素值是否与指定正则表达式匹配
用法 - 配合pattern属性使用
tooLong
作用 - 判断当前元素值的长度是否正确
用法 - 配合maxlength属性
注意
使用maxlength属性后,实际不可能出现长度大于maxlength的值
tooLong很难出现这种情况
rangeUnderflow
作用 - 判断当前元素值是否小于min属性值
用法 - 配合min属性
注意 - 并不能与max属性值进行比较
stepMismatch
作用 - 判断当前元素值是否与step设置相符
用法 - 配合step使用
注意 - 并不能与min或max属性值进行比较
customError
用法 - 配合setCustomValidity()方法
如果使用该方法,该状态返回true
setCustomValidity()方法
作用 - 设置自定义的错误提示内容
问题 - 使用该方法设置错误信息
当输入正确时,调用该方法将信息设置为空("")
不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)
扩展内容
代码的编写 - 逻辑的完整性
判断value值是否为空
value==""||value==null
tooLong状态
H5(一)的更多相关文章
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap(四)
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 旺财速啃H5框架之Bootstrap(三)
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- H5程序员如何利用cordova开发跨平台应用
什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- 【腾讯Bugly干货分享】H5 视频直播那些事
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
随机推荐
- CSS-垂直|水平居中问题的解决方法总结
题外话:前两天和专业老师探讨最近的一个项目,涉及到对一个浮动的盒子局中的问题,老师的解决方法打开了我的新思路.让我有了总结一下平时的居中问题的想法.不然可能忘掉了以后又要到处寻找解决办法了.另外也给我 ...
- Rest webservice 和SOAP webservice
SOAP: 简单对象访问协议(Simple Object Access Protocol,SOAP)是一种基于 XML 的协议,可以和现存的许多因特网协议和格式结合使用,包括超文本传输协议(HTTP) ...
- React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
- sql杀死进程
查询SQL所有的链接 并可以查看连接当前正在做什么操作..使用的什么语句.. SELECT spid, blocked, DB_NAME(sp.dbid) AS DBName, program_na ...
- 批量解密SQLSERVER数据库中的各种对象的工具dbForge SQL Decryptor
批量解密SQLSERVER数据库中的各种对象的工具dbForge SQL Decryptor2.1.11 之前写过一篇文章,使用redgate公司的SQL PROMPT工具,但是不太方便 SQLPRO ...
- ASP.NET 显示项目之外的图片
1.<asp:Image>标签的使用Loginer.images是图片的路径 this.images.ImageUrl = "showImg.aspx?imgFile=" ...
- (转载)解决GDI闪烁
一般的windows 复杂的界面需要使用多层窗口而且要用贴图来美化,所以不可避免在窗口移动或者改变大小的时候出现闪烁. 先来谈谈闪烁产生的原因 原因一:如果熟悉显卡原理的话,调用GDI函数向屏幕输出的 ...
- 谈谈__proto__和prototype的区别
我想javascript中的原型链一直想很多初学javascript的同学感到非常的困惑,今天看了一些文章,结合自己的理解,把原型链这个东西从新来整理一下,如有不对之处,望大家帮忙指出. 首先,我们应 ...
- solr基本入门
一直想接触下搜索,虽然之前也玩了下solr,但一直没深入,所以也都忘得差不多了,现在solr都6.1了,发展真快.重新拾起,记录下也好,为以后出问题查找起来快一点. 1.搜索最重要的概念就是倒排索引, ...
- Java中Runnable和Thread的区别
在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口:Thread类是在java.lang包中定义的.一个类只要继承了Thread类同时覆写了本类中的run() ...