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小内容(四)

    SVG   基本内容     SVG并不属于HTML5专有内容       HTML5提供有关SVG原生的内容     在HTML5出现之前,就有SVG内容     SVG,简单来说就是矢量图     ...

  2. H5小内容(六)

    Web Worker   基本内容     单线程与多线程       Worker可以模拟多线程的效果     定义 - 运行在后台的javascript     注意 - 不能使用DOM      ...

  3. H5小内容(五)

    Geolocation(地理定位)   基本内容     地理定位 - 地球的经度和纬度的相交点     实现地理定位的方式       GPS - 美国的,依靠卫星定位       北斗定位 - 纯 ...

  4. H5小内容(三)

    Canvas(画布)   基本内容     简单来说,HTML5提供的新元素<canvas>     Canvas在HTML页面提供画布的功能       在画布中绘制各种图形     C ...

  5. H5小内容(二)

    音视频处理   视频处理     基本内容       使用Flash技术处理HTML页面中的视频内容         包含音频.动画.网页游戏等  特点    浏览器原生不支持(IE浏览器要求安装A ...

  6. Egret白鹭H5小游戏开发入门(一)

    前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...

  7. 开发H5小游戏

    Egret白鹭H5小游戏开发入门(一)   前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...

  8. 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」

    uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...

  9. 从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

    本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更 ...

随机推荐

  1. easyui datagrid用formtater的问题

    当value是一个字符串是直接使用value会提示value没有定义,这时需要转换下value,用""+value来替换就可以了.

  2. DevExpress GridControl GridView 导出到 Excel 类

    说明: 1>GridView 导出到 Excel (如果分页,只导出当前页数据) 2>GridView 导出到 Excel 3>方法2可以参考DataTable 导出到 Excel ...

  3. SQL注入专题

    SQL注入专题--整理帖 SQL注入是从正常的WWW端口访问,而且表面看起来跟一般的Web页面访问没什么区别, 所以目前市面的防火墙都不会对SQL注入发出警报,如果管理员没查看IIS日志的习惯,可能被 ...

  4. SqlServer数据库的一些方法的用途

    一直分不清这三种方法的具体用法现在终于找齐了 ExecuteNonQuery方法和ExecuteScalar方法和ExecuteReader方法的区别 (1)ExecuteNonQuery():执行命 ...

  5. .Net Framwork类库

    .NET Framework 类库是一个由类.接口和值类型组成的库,通过该库中的内容可访问系统功能.它是生成 .NET Framework 应用程序.组件和控件的基础.类库中的命名空间和命名空间类别在 ...

  6. 更改cmd语言(chcp)

    chcp 437 更改为英文 chcp 936 更改为简体中文 mode con cp select=437 mode con cp /status chcp cmd /c "chcp 43 ...

  7. nginx安装php和php-fpm

    最近在学习nginx,看了好多帖子终于安装成功了. 经验,首先不要用yum安装,安装完以后根本找不到安装目录在哪里呀,然后安装失败以后会很不方便. 最终选择了自己编译安装. 看了好多帖子都不行,终于找 ...

  8. [置顶] android LBS的研究与分享(附PPT)

    早上起床后想想以前的工作有什么可以分享的... 两年前,前公司在做一个陌生人交友的社交软件(比陌陌还早),需要研究LBS的相关工作(这里面主要研究的是Google定位)... 一.简要调研结果 很多 ...

  9. linux上安装shell编辑器与linux运维面试题

    分两个部分 一.安装B-shell解释器 安装cygwin  Eclipse要找到安装的bin路径 https://cygwin.com 二.安装编辑器shellEd 下载可以得到一个:net.sou ...

  10. Android_EditText

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...