《HTML5實戰》——第2章 建立表單：輸入小部件、資料綁定以及資料驗證

本節書摘來自異步社群《html5實戰》一書中的第2章，第2.1節，作者： 【美】rob crowther , joe lennon , ash blue , grey wanish 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

本章主要内容

新的html5輸入類型與屬性

data-*屬性，valueasnumber元素以及output元素

限制驗證api

繞過資料驗證的方法

css3僞類

利用modernizr進行html5特性偵測，利用polyfill進行回退相容

随着web的日益成熟，使用者開始需求更為豐富的表單字段類型及小部件，他們希望能有一種在各種web應用中都通用的統一标準，特别是當涉及到資料驗證時。html5充分迎合了這種需求，提供了13種新的表單輸入類型，其中包括了數值微調器、滑動條、日期選擇器，以及顔色選擇器等類型。

為了增強表單的功能，html5标準還定義了一些可應用于input元素的新屬性，這其中有像placeholder和autofocus這樣控制html文檔呈現方式的屬性，也包括required和pattern這樣用于驗證的屬性。現在甚至無需借助javascript，就可以用一組新的css僞類來定義有效或無效的表單元素。假如無法提供進階驗證需求，那麼通過新引入的限制驗證api這一标準化javascript api的幫助，也能夠測試表單字段的有效性。另外，通過一個新的事件，還可以偵測到無效的資料輸入。

本站将通過建構一個計算機産品的訂單來學習所有新特性的用法。在送出之前，訂單将使用html5的資料驗證來為用戶端的資料輸入進行“消毒”。

建構本章訂單應用的目的

通過學習本章這個簡單的執行個體應用，你将學會以下幾項内容。

如何利用新的輸入類型，用更少的代碼實作更多的小部件。

如何利用新的輸入類型，用更少的代碼來進行資料驗證。

如何利用data-*屬性将資料綁定到html元素上。

如何通過限制驗證api特性建立自定義的驗證測試。

我們先來看一下這個表單的功能概述，了解一下所需知識。

2.1 表單的功能概述與所需知識

本章所建立的訂單如圖2-1所示，允許使用者輸入個人資料、登入詳細資訊、訂購及付款資訊。

該表單使用了以下這些html5的新特性。

在适當的時候，利用表單的input元素類型（email、tel、number和month）及屬性（required、pattern、autofocus、placeholder、max與min），為使用者提供更好的部件及資料驗證功能。

儲存每一産品價格的data-*屬性、valueasnumber屬性并以數字格式讀取輸入值，以及用output元素來呈現金額小計與總計。

通過formnovalidate與formaction屬性來繞過資料驗證并儲存未完成的表單。

通過限制驗證api來執行自定義驗證，并及時發現使用者所送出的表單中所包含的無效元素，利用css3僞類選擇器處理無效元素的樣式。

利用一些polyfill和javascript的modernizr.js庫，讓表單更好地呈現在那些不支援html5特性的浏覽器上。雖然從嚴格意義上來說，modernizr.js和polyfill并不是html5的特性，但對于html5應用的實際開發來說，還是強烈建議使用它們。

編碼完成後，該訂單在所有最新版本的主流浏覽器上都能正常運作，但在對某些特性的支援上，不同的浏覽器可能會存在不同程度的差異，如用于小部件的新輸入類型，以及用于限制驗證api的内聯錯誤消息提示等特性。随着各大浏覽器對于新特性支援度的提高，這些問題也會變得無足輕重。

注意

本章隻介紹訂單應用的用戶端部分。因為送出表單會産生一個url請求，是以為了實作更多的行為，需要在伺服器端實作表單，這就要用到伺服器端語言及架構（如php或ruby on rails），關于這方面本書暫不做介紹。

建構本章範例應用所需知識點

本章需要跟以下5個檔案打交道：

一個html文檔；

一個javascript檔案；

一個css樣式表；

modernizr庫；

月份選擇器的polyfill腳本。

将.js檔案重命名為modernizr.js，然後把它和css樣式表以及monthpicker.js一起放入應用的目錄中。

提示

modernizr網站提供了兩種下載下傳版本：開發版和産品版。開發版包含了整個測試套件，并且沒有經過壓縮或縮減。如果着急用，而且并不在意檔案大小，那麼用開發版就很好。産品版則允許選擇測試套件，并且經過了壓縮，使檔案盡量縮小。選用産品版時，一定要把input attributes、input types以及modernizr.load測試包括進去，因為本章就要用到它們。本章稍後将對modernizr庫予以詳述。

通過概述，并分析所要用到的知識點，下面就先來建構表單的使用者界面。