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. HDU 4006The kth great number(K大数 +小顶堆)

    The kth great number Time Limit:1000MS     Memory Limit:65768KB     64bit IO Format:%I64d & %I64 ...

  2. HTML DOM prompt() 方法

    1. 定义和用法 prompt() 方法用于显示可提示用户进行输入的对话框. 语法 prompt(text,defaultText) 参数 描述 text 可选.要在对话框中显示的纯文本(而不是 HT ...

  3. Greenplum记录(二):估计存储容量

    存储空间除了用来存储用户数据,还需要:landing backup files and data load files 空系统的存储空间:disk_size * number_of_disks 除去系 ...

  4. Java学习笔记-按值传递

    参数的值传递 实参必须与方法中次你故意的参数在次序和数量上匹配,在类型上兼容.类型兼容是指不需要经过显式的类型转换,实参的值就可以传递给形参.如将int型的实参值传递给double型形参. 当调用方法 ...

  5. 如何在Texstudio内加载语法检查词典?

    如何在Texstudio编辑软件内加载"语法检查词典"? How to make dictionary work in TexStudio I am using TexStudio ...

  6. select、poll、epoll之间的区别总结[整理]

    select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作.但select ...

  7. 如何修改geditor的配置文件 -好像geditor没有文本格式的配置文件? 要使用dconf-editor来配置- geditor自己配置编码格式

    好像geditor没有文本格式的配置文件? 好像是通过一个程序, 叫 dconf-editor 来配置geditor的? 以前是通过gconf-editor来配置的, 但是gconf-editor的配 ...

  8. 转载:MySQL 语句大全:创建、授权、查询、修改等

    本文转载>这里 一.用户创建.权限.删除 1.连接MySql操作 连接:mysql -h 主机地址 -u 用户名 -p 用户密码 (注:u与root可以不用加空格,其它也一样)断开:exit ( ...

  9. 2.2、Hibernate用注解方式实现一对多、多对多关系

    一.一对多关系 1.在上一篇日志中用.xml配置文件项目基础上,再往lib目录先添加一个包-hibernate-jpa-2.0-api-1.0.0.Final.jar 2.新建一个com.st.bea ...

  10. Android通过Http连接MySQL 实现登陆/注册(数据库+服务器+客户端)

    写在最前: 在实际开发中,相信每个项目都会有用户登陆注册功能,这个实现的方法很多,下面是我实现的方法,供大家交流. 新人发帖,万分紧张,怎么样才能装作一副经常发帖的样子不被别人看出来呢-,- ? 好了 ...