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

相關文章
相關標籤/搜索