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