一、 HTML5介紹
注意：
HTML5永遠(yuǎn)都不可能脫離javaScript
HTML5在移動(dòng)端支持好于PC端
二、 HTML5新表單
-
input新類型
email:驗(yàn)證是否包含@ search:搜索框 url: 驗(yàn)證是否包含http tel: 效果只能在移動(dòng)端出現(xiàn) number: 數(shù)字選擇 min max step range: 范圍類型 min max step value color: 顏色選擇器 date:日期類型 week:星期類型 month:月份類型 -
表單新元素
1）datalist: 定義input的備選框 input的list的值要等于datalist的id值 數(shù)據(jù)與結(jié)構(gòu)的分離 數(shù)據(jù)：預(yù)定義數(shù)據(jù)內(nèi)容datalist 結(jié)構(gòu)：顯示在頁(yè)面中的元素input 使用datalist元素定義的數(shù)據(jù)，可以重復(fù)使用 2）progress: 進(jìn)度條 max - 設(shè)置進(jìn)度條的最大值 沒(méi)有min屬性 - 最小值為0 value - 當(dāng)前的進(jìn)度值 3）meter : 刻度 min: 最小值 max: 最大值 value: 當(dāng)前值 low: 低預(yù)警值 high:高預(yù)警值 4） output(了解) : 輸出-
表單新屬性
placeholder ： 置空字符
-
multiple:允許輸入多個(gè)值
多個(gè)值使用逗號(hào)隔開(kāi)，例如多個(gè)郵箱
只定義屬性名，沒(méi)有定義屬性值
3）autofocus:自動(dòng)獲取焦點(diǎn)
只定義屬性名，沒(méi)有定義屬性值4）form：允許將表單元素定義在表單外
form表單外的表單一定要寫(xiě)form的id
-
三、HTML5 - 表單新驗(yàn)證屬性
1. required:驗(yàn)證當(dāng)前元素之是否為空
2. pattern: 使用正則表達(dá)式驗(yàn)證當(dāng)前元素值是否匹配
不能驗(yàn)證內(nèi)容是否為null
3. min和max: 驗(yàn)證當(dāng)前元素值最大值或最小值
一般使用與number/range等元素
4. minlength和maxlength:驗(yàn)證當(dāng)前元素值的最小長(zhǎng)度和最大長(zhǎng)度
minlength:并不是html5的新屬性
5）validity:表單驗(yàn)證HTML5提供一種有效狀態(tài)
有效狀態(tài)通過(guò)validityState對(duì)象獲取到
validityState對(duì)象可通過(guò)validity屬性得到
四、HTML5- 表單新驗(yàn)證狀態(tài)
驗(yàn)證(有效)狀態(tài)-用來(lái)替換原來(lái)的判斷邏輯
1、 validityState對(duì)象提供了一系列的有效狀態(tài)
通過(guò)有效狀態(tài)判斷，進(jìn)行判斷
注意：所有驗(yàn)證狀態(tài)必須配合上訴的驗(yàn)證屬性使用
2、 valueMissing:
判斷當(dāng)前元素值是否為空
配合required屬性使用
3、 typeMismatch
判斷當(dāng)前元素值得類型是否匹配
配合email/number/url等屬性使用
4、 patternMismatch
判斷當(dāng)前元素值是否匹配正則表達(dá)式
配合pattern屬性使用
5. tooLong
判斷當(dāng)前元素值的長(zhǎng)度是否正確
配合maxlength屬性
6. rangeUnderflow
判斷當(dāng)前元素值是否小于min屬性值
配合min
7. stepMismatch
判斷當(dāng)前元素值是否與step設(shè)置相同
配合step屬性，并不與min和max屬性值比較
8. valid :
判斷當(dāng)前元素是否正確
返回true - 表示驗(yàn)證成功
返回false - 表示驗(yàn)證失敗
9. customError：
配合setCustomValidity()方法使用
setCustomValidity()
設(shè)置自定義的錯(cuò)誤提示內(nèi)容
一旦使用該方法修改默認(rèn)錯(cuò)誤提示后，即使輸入正確也會(huì)有提示
一旦使用該方法，validityState所有狀態(tài)都返回false