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小内容(四)
SVG 基本内容 SVG并不属于HTML5专有内容 HTML5提供有关SVG原生的内容 在HTML5出现之前,就有SVG内容 SVG,简单来说就是矢量图 ...
- H5小内容(六)
Web Worker 基本内容 单线程与多线程 Worker可以模拟多线程的效果 定义 - 运行在后台的javascript 注意 - 不能使用DOM ...
- H5小内容(五)
Geolocation(地理定位) 基本内容 地理定位 - 地球的经度和纬度的相交点 实现地理定位的方式 GPS - 美国的,依靠卫星定位 北斗定位 - 纯 ...
- H5小内容(三)
Canvas(画布) 基本内容 简单来说,HTML5提供的新元素<canvas> Canvas在HTML页面提供画布的功能 在画布中绘制各种图形 C ...
- H5小内容(二)
音视频处理 视频处理 基本内容 使用Flash技术处理HTML页面中的视频内容 包含音频.动画.网页游戏等 特点 浏览器原生不支持(IE浏览器要求安装A ...
- Egret白鹭H5小游戏开发入门(一)
前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...
- 开发H5小游戏
Egret白鹭H5小游戏开发入门(一) 前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...
- 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」
uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...
- 从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条
本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更 ...
随机推荐
- fedora21安装xmind7
老版本的xmind安装方法,在最后的阶段无法成功注册到系统中,desktop无法自定义完成.参考:http://www.cnblogs.com/cupcoffee/p/3560626.html 直到从 ...
- JS----JS调试技巧
骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前端还主要以内容展示为主,浏览器脚本还只能为页面提供非常简单的辅助功能的时候.那个时候,网页主要运行在以IE6为主的浏览器中,JS的调试功能还 ...
- 用document.title=“xxx”动态修改title,在ios的微信下面不生效
单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title.常规做法如下,可惜在iO ...
- 自己动手Jquery插件
最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时候 ...
- Redis_基本类型介绍和指令___3
1.set(集合) Redis的Set是string类型的无序集合.集合成员是唯一的,这就意味着集合中不能出现重复的数据. Redis 中 集合是通过哈希表实现的,所以添加,删除,查找的复杂度都是O( ...
- Android-怎样用命令行进行打包
转载请标明出处:http://blog.csdn.net/goldenfish1919/article/details/40978859 1.生成R文件 aapt package -f -m -J . ...
- Spring3.0官网文档学习笔记(八)--3.4.3~3.4.6
3.4.3 使用depends-on 使用depends-on能够强制使一个或多个beans先初始化,之后再对这个bean进行初始化. 多个bean之间用","." ...
- SNMP协议总结
说明:本文仅供学习交流,转载请标明出处,欢迎转载! SNMP(Simple Network Management Protocal),简单网络管理协议,其前身是SGMP协议(简单网关监控协议),该协议 ...
- Linux内核里的DebugFS
DebugFS,顾名思义,是一种用于内核调试的虚拟文件系统,内核开发者通过debugfs和用户空间交换数据.类似的虚拟文件系统还有procfs和sysfs等,这几种虚拟文件系统都并不实际存储在硬盘上, ...
- C# - 文件操作类
除了封装数据流的类 System.IO命名空间中还提供了可以操作文件和目录的类 Directory类 ns:System.IO Level:Object=>Directory 表示目录的类 用于 ...