王艷麗

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

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

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

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

1 HTML5的表單新特性

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

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

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

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

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

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

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

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

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

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

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

2 基于HTML5的表單設(shè)計(jì)與驗(yàn)證

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

注冊(cè)頁(yè)面的效果如果所示。

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

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

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

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

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

HTML5的編碼如下：

<！DDCTYPE html>

3 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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