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狀態
??

轉載于:https://www.cnblogs.com/yueluo/p/5159436.html

總結

以上是生活随笔為你收集整理的H5小内容（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。