HTML5目前最新的規範(標準)是2014年10月推出 2005年左右出現HTML5版本(非標準) W3C組織(兩個組織定義H5規範) 學習(研究)HTML5是學習未來(將來主流) HTML版本 - 第一階段主要學習還是4版本(包含5版本) HTML5版本之後,聲明不再出現版本信息 ...
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狀態
