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(一)的更多相关文章

  1. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  4. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  5. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  6. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  7. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. 【腾讯Bugly干货分享】H5 视频直播那些事

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...

  10. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

随机推荐

  1. matlab 曲线拟合

    曲线拟合(转载:http://blog.sina.com.cn/s/blog_8e1548b80101c9iu.html) 补:拟合多项式输出为str 1.poly2str([p],'x') 2. f ...

  2. python包使用指南-创建虚拟环境

    创建虚拟环境的两种方法: 1.virtualenv 2.venv http://packaging.python.org/en/latest/installing/#creating-virtual- ...

  3. SQLServer------Join的使用方法

    参考菜鸟教程网: http://www.runoob.com/sql/sql-join.html select a.Canteen,b.OrderNum,b.CreateTime,c.Name fro ...

  4. jstack工具查看系统线程问题

    背景: 最近在做项目系统的异常测试,项目依赖于nkv,需要模拟依赖组件nkv异常时系统的响应及性能情况.通过tc工具模拟当服务器发送到nkv的请求超时时系统的响应.发现接口返回错误率100%,查看服务 ...

  5. C++类成员在内存中的存储及对齐方式

    前言:数据对齐的基本理论参见文章:http://www.cnblogs.com/MyBlog-Richard/articles/5993448.html 一.空类的大小 C++中空类的大小是1,这是因 ...

  6. Windows下搭建PHP开发环境

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

  7. Linux 新手的学习笔记

    系统分区: MBR分区(主分区不超过4个,单个分区不超过2TB) fdisk -l fdisk /dev/sdb n(添加一个分区)p(添加一个主分区,主分区)e(添加一个扩展分区)l(添加一个逻辑分 ...

  8. 美团HD(4)-二级联动效果

    DJNavDropView.m #import "DJNavDropView.h" #import "DJCategory.h" #import "D ...

  9. 学习CodeIgniter框架之旅(二)继承自定义类

    在很多情况下,框架类并不能满足项目的需求,这时候需要程序要自定义一些类,比如说基类等等,对比了TP框架,CI框架目前好像还没加入命名空间,这点TP做得比较好,不用特殊的处理就可以随便继承自定义的类,只 ...

  10. Linux2.6.11版本:classic RCU的实现

    转载自:http://www.wowotech.net/kernel_synchronization/linux2-6-11-RCU.html 一.前言 无论你愿意或者不愿意,linux kernel ...