HTML5對(duì)于表單有著極大程度的優(yōu)化，無(wú)論是語(yǔ)義，小部件，還是數(shù)據(jù)格式的驗(yàn)證。我猜你肯定會(huì)以瀏覽器兼容作為借口不愿意使用這些“新功能”，但這絕不應(yīng)該成為使你停滯不前的原因，況且還有像Modernizr和ployfill這樣的工具庫(kù)幫助你在不支持Html5的瀏覽器上進(jìn)行回退處理。當(dāng)你真正試著使用這些表單的新功能時(shí)，我保證你會(huì)愛(ài)上它。如果說(shuō)唯一的缺陷，就是提示框的樣式是瀏覽器默認(rèn)的，你無(wú)法改變，好吧，如果你相信瀏覽器廠(chǎng)商的設(shè)計(jì)師的審美水平的話(huà)（我相信他們的設(shè)計(jì)水平比絕大部分普通人要好，如果不考慮風(fēng)格兼容的話(huà)），抓緊學(xué)就對(duì)了！

原生驗(yàn)證

input type

HTML5中為數(shù)據(jù)格式驗(yàn)證提供了很多原生的支持，例如：

<input type='email'/>

當(dāng)點(diǎn)擊提交按鈕時(shí)，如果你輸入的格式不符合email，則會(huì)導(dǎo)致無(wú)法提交，瀏覽器會(huì)提示你錯(cuò)誤信息。

比如在chrome下：

注意：

1、僅當(dāng)你提交的時(shí)候會(huì)觸發(fā)瀏覽器的驗(yàn)證

2、不同瀏覽器提示信息的行為樣式不一樣

3、當(dāng)有多個(gè)input不符合要求時(shí)，只會(huì)提示一個(gè)錯(cuò)誤，一般會(huì)提示表單中相對(duì)較前的Input的

不要理所應(yīng)當(dāng)?shù)恼J(rèn)為當(dāng)input的type等于tel的時(shí)候，如果你輸入的不是電話(huà)號(hào)碼格式，在提交時(shí)也會(huì)被瀏覽器的阻擋并提示錯(cuò)誤信息，type=’tel’在PC端只起到語(yǔ)義的作用，在移動(dòng)端可以使產(chǎn)生的鍵盤(pán)為純數(shù)字鍵盤(pán)，并不能起到數(shù)據(jù)驗(yàn)證的作用。

pattern

你可以使用pattern屬性來(lái)對(duì)瀏覽器不提供原生驗(yàn)證的數(shù)據(jù)格式設(shè)置自定義格式驗(yàn)證。pattern屬性的值是一個(gè)正則表達(dá)式（字符串）：

<input type='tel' pattern='[0-9]{11}' title='請(qǐng)輸入11位電話(huà)號(hào)碼'>

點(diǎn)擊提交時(shí)，如果你輸入的數(shù)據(jù)不符合pattern里面正則的格式，那么瀏覽器會(huì)阻止表單提交，并提示：‘請(qǐng)與所請(qǐng)求的格式保持一致’+ title里的內(nèi)容（小字）。但注意，當(dāng)你的文本框中內(nèi)容為空的時(shí)候，瀏覽器不會(huì)對(duì)其進(jìn)行檢查，會(huì)直接提交表單（因?yàn)闉g覽器認(rèn)為這個(gè)框框不是必填項(xiàng)）。如果你想要這個(gè)框框必須有內(nèi)容，請(qǐng)加上required屬性。

通過(guò)HTML原生的驗(yàn)證系統(tǒng)，基本就能滿(mǎn)足我們對(duì)表單提交的限定。但HTML5提供了更高級(jí)的功能來(lái)方便我們開(kāi)發(fā)和提升用戶(hù)體驗(yàn)。

約束驗(yàn)證API

默認(rèn)提示信息

像‘請(qǐng)與所請(qǐng)求的格式保持一致’這樣的瀏覽器提示信息字串藏在input DOM對(duì)象的validationMessage屬性里，這個(gè)屬性在大多數(shù)現(xiàn)代的瀏覽器中是只讀的，即不可修改，比如下面的代碼：

<input type="text" required id='input'/>

當(dāng)提交時(shí)，如果Input內(nèi)容為空，那么瀏覽器會(huì)提示‘請(qǐng)?zhí)顚?xiě)此字段’，我們可以在控制臺(tái)把這句話(huà)打印出來(lái)：

var input = document.getElementById('input')
input.validationMessage // =>'請(qǐng)?zhí)顚?xiě)此字段'

如果想修改其中的內(nèi)容，可以調(diào)用setCustomValidity接口改變validationMessage的值

input.setCustomValidity('這個(gè)字段必須填上哦');
// 下面這種做法適用于不支持setCustomValidity的瀏覽器，基本現(xiàn)代瀏覽器都不支持這樣做
input.validationMessage = '這個(gè)字段必須填上哦'

注意，像required這樣的HTML原生驗(yàn)證，雖然能改變其中信息，但無(wú)法把信息置為空字串，原因下面會(huì)講到。

原理

HTML表單驗(yàn)證系統(tǒng)通過(guò)validationMessage屬性檢測(cè)該文本框的數(shù)據(jù)是否通過(guò)驗(yàn)證，如果其值為空字串，則表示通過(guò)了驗(yàn)證，否則，表示未通過(guò)，瀏覽器會(huì)把其值作為錯(cuò)誤信息提示給用戶(hù)。所以在原生驗(yàn)證時(shí)，用戶(hù)無(wú)法把validationMessage的值設(shè)置為空字符串。

約束驗(yàn)證API的簡(jiǎn)單實(shí)例

約束驗(yàn)證API是在原生方法之上更靈活的表達(dá)方式，你可以自己設(shè)置數(shù)據(jù)是否通過(guò)，而不借助于正則表達(dá)式。原理很簡(jiǎn)單，通過(guò)if判斷，如果數(shù)據(jù)格式使你滿(mǎn)意，那么你就調(diào)用setCustomValidity使validationMessage的值為空，否則，你就調(diào)用setCustomValidity傳入錯(cuò)誤信息：

input.addEventListener('input', function () {
        if(this.value.length > 3){ // 判斷條件完全自定義
            input.setCustomValidity('格式不正確');
        }else {
            input.setCustomValidity('')
        }
 });