怎么使用HTML5實(shí)現(xiàn)表單驗(yàn)證

這篇文章主要介紹“怎么使用HTML5實(shí)現(xiàn)表單驗(yàn)證”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“怎么使用HTML5實(shí)現(xiàn)表單驗(yàn)證”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)公司客戶idc服務(wù)中心，提供綿陽電信機(jī)房、成都服務(wù)器、成都主機(jī)托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開放、透明、穩(wěn)定、高性價(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級(jí)技術(shù)保障。

HTML5對(duì)表單元素提供了patern屬性，它接受一個(gè)正則表達(dá)式。表單提交時(shí)這個(gè)正則表達(dá)式會(huì)被用于驗(yàn)證表單內(nèi)非空的值，如果控件的值不匹配這個(gè)正則表達(dá)就會(huì)彈出提示框，并阻止表達(dá)提交。提示框內(nèi)的文字可以使用setCustomValidity方法來自定義。

比如下面這個(gè)表單內(nèi)，文本框只接受大陸的手機(jī)號(hào)，輸入其它東西就無法提交

運(yùn)行

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>

<form>

</form>

注意只有非空的表單才會(huì)使用正則驗(yàn)證，如果什么都不輸入的話，pattern不會(huì)被使用，所以還需要required協(xié)助。但是這個(gè)代碼彈出的提示是這樣的：

這樣的提示文字只有猴子看得懂！所以我們還需要更友好的提示文字，使用setCustomValidity方法來定義。

運(yùn)行

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>

<form>

</form>

text.oninput=function(){

text.setCustomValidity("");

};

text.oninvalid=function(){

text.setCustomValidity("請(qǐng)不要輸入火星的手機(jī)號(hào)好嗎？");

};

</script>

invalid事件會(huì)在表單submit事件之前觸發(fā)，如果驗(yàn)證不通過的話就不會(huì)觸發(fā)表單的submit。而提交時(shí)會(huì)先驗(yàn)證所有表單元素是值是否有效。除了提交外還可以手動(dòng)調(diào)用checkValidity方法來執(zhí)行驗(yàn)證。

上面的例子中我直接對(duì)控件設(shè)置固定的提示其實(shí)不太好，有時(shí)候可能需要更詳細(xì)的提示信息，比如空的時(shí)候提示為空、太長的時(shí)候提示太長、非數(shù)字的時(shí)候提示非數(shù)字等。這些動(dòng)作可以通過程序驗(yàn)證后動(dòng)態(tài)地setCustomValidity來實(shí)現(xiàn)。

其實(shí)我覺得HTML5的這套API設(shè)計(jì)的很糟糕，雖然可以滿足基本需求，但還真不太實(shí)用。

手機(jī)頁面中表單提交用JavaScript驗(yàn)證信息會(huì)彈出窗口，用戶體驗(yàn)極差，所以再給出一個(gè)手機(jī)端用HTML5的屬性來驗(yàn)證的示例：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

// 主要用了HTML的一下屬性

// 1.placeholder 提供可描述輸入字段預(yù)期值的提示信息。該提示會(huì)在輸入字段為空時(shí)顯示,并會(huì)在字段獲

//得焦點(diǎn)時(shí)消失

//2.required 屬性規(guī)定必需在提交之前填寫輸入字段

//3.pattern 是正則表達(dá)式, 里面可以直接填寫正則表達(dá)式

關(guān)于“怎么使用HTML5實(shí)現(xiàn)表單驗(yàn)證”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

名稱欄目：怎么使用HTML5實(shí)現(xiàn)表單驗(yàn)證
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/article28/posscp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、定制網(wǎng)站、用戶體驗(yàn)、營銷型網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

怎么使用HTML5實(shí)現(xiàn)表單驗(yàn)證