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状态
   javascript

相关文章
相关标签/搜索