基于HTML5的網(wǎng)頁表單客戶端驗證技術(shù)的研究

王艷麗

摘要：該文針對HTML4表單驗證需用JavaScript等編寫復(fù)雜代碼的問題，引入了HTML5。簡要介紹HTML5表單的新特性，并用HTML5設(shè)計實現(xiàn)了用戶注冊頁面，并在客戶端進(jìn)行了驗證，希望給讀者提供一定的參考。

關(guān)鍵詞：HTML5；網(wǎng)頁；表單；客戶端驗證

中圖分類號：TP37 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2015）24-0126-02

Web表單是訪問者和網(wǎng)站互動的主要方式，從注冊表單到聯(lián)系信息表，從商業(yè)領(lǐng)域到政府部門，表單無處不在。訪問者往網(wǎng)頁表單輸入信息的時候，必須按照網(wǎng)頁對信息格式的要求來填寫，如果所填寫的信息沒有按照網(wǎng)頁的格式要求就無法通過網(wǎng)頁對信息的驗證，這時就必須要對所輸入的信息的格式進(jìn)行修改。但是當(dāng)輸入大量的表單信息的時候，通過人工來檢查驗證比較困難，所以必須要有相應(yīng)的表單驗證技術(shù)對表單中的數(shù)據(jù)進(jìn)行驗證。目前表單的驗證技術(shù)主要有JavaScript、Jquery等，但是使用該類技術(shù)進(jìn)行表單驗證時需要編寫復(fù)雜的代碼，表單校驗相對復(fù)雜，錯誤提示不夠，網(wǎng)站可維護(hù)性較差。而用HTML5的表單設(shè)計的新特性，可以讓表單驗證變得更簡單，更接近于客戶端的驗證。

1 HTML5的表單新特性

HTML5的表單是在HTML4表單部分的基礎(chǔ)上新增加了一些特性，這些特性不僅能滿足用戶新的需求，而且減少了開發(fā)人員的工作量，提高了開發(fā)效率。HTML4中主要的表單標(biāo)簽有form、input、textarea、select和option等，在用戶輸入數(shù)據(jù)后，需要編寫腳本進(jìn)行數(shù)據(jù)合法性的驗證，而且編碼復(fù)雜，需要用復(fù)雜的正則表達(dá)式檢驗用戶的輸入是否合乎規(guī)范。而HTML5的input元素在原有基礎(chǔ)上增加了許多新的輸入類型及新的屬性，這些新輸入類型和新屬性增加了數(shù)據(jù)檢查的功能。Input元素的主要新增輸入類型如下：

email類型：用于輸入電子郵件地址，當(dāng)提交表單時，會自動檢測輸入內(nèi)容是否符合電子郵件格式，如果不符合，將給出錯誤提示。例如：E-mail：。

search類型：在網(wǎng)站中，用戶經(jīng)常進(jìn)行信息搜索，HTML5增加了搜索控件，可以在搜索框中輸入信息進(jìn)行站點搜索。例如：

url類型：用于輸入用戶需要的網(wǎng)址信息，當(dāng)表單提交時，會自動檢測輸入內(nèi)容是否符合網(wǎng)址格式，如果不符合，將給出錯誤提示。

number類型：用于輸入用戶需要的數(shù)值信息，當(dāng)表單提交時，如果輸入的是非數(shù)值，將給出錯誤提示。

input元素的主要新增公共屬性如下：

autofocus：用于設(shè)置在頁面加載完畢時，頁面中的控件是否自動獲取焦點。

required：限制提交時元素內(nèi)容不能為空。

pattern：通過正則表達(dá)式限制元素內(nèi)容的格式，不符合格式則不允許提交。

min和max：限制數(shù)字類型或日期類型輸入范圍的最小值和最大值，不在范圍內(nèi)不允許提交。

step：限制元素的值每次增加或者減少的基數(shù)，不是基數(shù)的倍數(shù)時不允許提交。

2 基于HTML5的表單設(shè)計與驗證

大多數(shù)的網(wǎng)站都有用戶注冊頁面，下面就用HTML5的表單技術(shù)來設(shè)計注冊頁面，并對注冊信息在客戶端進(jìn)行驗證。

注冊頁面的效果如果所示。

如果輸入的注冊信息格式都是正確的，點擊提交注冊時，在客戶端就會驗證通過。但如果輸入的注冊信息格式不正確，點擊提交注冊時，客戶端就會給出相應(yīng)的錯誤提示信息。下面我們逐一進(jìn)行驗證。

如果輸入的密碼少于6位，或包含空格，或是9位一下的純數(shù)字，提交時將給出如下圖的提示信息。

如果輸入的年齡不是0—99的整數(shù)，提交時將給出如下圖的提示信息。

如果輸入的電子郵件地址格式不正確，提交時將給出如下圖的提示信息。

如果輸入的網(wǎng)址格式不正確，提交時將給出如下圖提示信息。

HTML5的編碼如下：

<！DDCTYPE html>

3 結(jié)束語

HTML5表單的特點就是簡潔漂亮，大大提高了程序員的開發(fā)效率，以后必將成為網(wǎng)頁開發(fā)的主要技術(shù)之一。HTML5的驗證功能也越來越接近客戶端的驗證，可以很有效地幫助用戶填寫正確的表單。但是HTML5的驗證仍然替換不了服務(wù)器端驗證，HTML5還處在完善階段，很多技術(shù)還將有待進(jìn)一步研究。本文主要利用HTML5實現(xiàn)了表單的設(shè)計與客戶端的驗證，希望給讀者提供一定的參考，有不對的地方，請批評指正。

參考文獻(xiàn)：

[1] http：//book.51cto.com[OL].

[2] http：//www.w3school.com.cn[OL].

[3] 鄧夢德.HTML5的新特性及其在基于Web的教學(xué)平臺開發(fā)中的應(yīng)用前景[J].電腦知識與技術(shù)，2014（6）.

[4] 伍杰華.基于CSS3的HTML5網(wǎng)頁表單研究與定制[J].計算機與信息技術(shù)，2013（12）.