MIS2000Lab.的「HTML5 認證考試，從零開始」#12--HTML5輸入驗證，（新）表單元件

DAY 12

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 12 篇

MIS2000Lab.的「HTML5 認證考試，從零開始」#12--HTML5輸入驗證，（新）表單元件

javascript jquery asp.net 網頁 group 驗證 form datalist combobox mis2000lab optgroup validate 驗證控制項

mis2000lab

2014-10-07 12:36:26

5985 瀏覽

分享至

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110
上一篇文章：http://ithelp.ithome.com.tw/question/10158353

緊接的兩篇文章將要分享HTML5的輸入驗證

簡單的說，就是防呆。避免使用者輸入錯誤的訊息？或是忘了填寫（留空白）等等

以前必須撰寫 JavaScript來防堵
但新的HTML5提供不少便利的屬性來幫忙

==== HTML5表單 ====

大致上都跟傳統THML表單雷同，學過的人可以放心。

[img=415,198]http://ithelp.ithome.com.tw/upload/images/20141007/2014100712241754336af130cf6_resize_600.jpg[/img]

HTML表單必須有一個送出（submit）的按鈕（寫成<input type=submit>），

才能在填寫完畢以後將這些資料送出（給另一個網頁處理，如<form action=login.aspx>所設定的）。

==== 其他的新 HTML5表單元件 ====

<select>下拉式選單在HTML5多了一個群組的功能
也就是 <optgroup>

[img=415,180]http://ithelp.ithome.com.tw/upload/images/20141007/2014100712255154336b4fc3b02_resize_600.jpg[/img]

<select id="carID" name="carNAME">
<optgroup label="歐規車種">
   <option value="bmw">BMW</option>
   <option value="benz">M.BenZ</option>
</optgroup>

<optgroup label="美規車種">
   <option value="tesla">Tesla</option>
   <option value="ford">Ford</option>
</optgroup>
</select>

如果您是撰寫ASP.NET的朋友，請參考這篇文章，也可以讓您的下拉式選單（DropDownList）

具備類似的功能：http://www.dotblogs.com.tw/mis2000lab/archive/2014/09/19/dropdownlist_group_html5_20140919.aspx

==== ComboBox， <datalist> ====

您點選文字輸入方塊（<inpuyt type=text>）後出現類似下拉式選單的選項（本節重點，<datalist>），
點選之後，還可以進一步修改裡面的文字（值）。

在Windows程式裡面常見到這種控制項，名為ComboBox，

但在網頁表單上則沒有這東西，必須自己動手改寫，而今HTML5補齊這個功能。

[img=415,252]http://ithelp.ithome.com.tw/upload/images/20141007/2014100712290654336c127c792_resize_600.jpg[/img]

==== 多采多姿的 TextBox ====

TextBox可以讓使用者任意輸入文字，也是我們做「驗證」最傷腦筋的地方

HTML5增加很多的屬性，幫了我們不少忙。

首先，輸入日期、E-Mail、顏色、數字範圍都可以應用上HTML5的新功能了。

下圖的左上方，可以發現「顏色」可以用點選的，會出現調色盤。不需要自己輸入顏色碼。

[img=415,342]http://ithelp.ithome.com.tw/upload/images/20141007/2014100712310654336c8a439e7_resize_600.jpg[/img]

上圖的右下方，當您輸入網址URL、E-mail的「錯誤格式」

也會自動出現警告！！

除了本文一開始提到的placeholder可以當成「浮水印」來用之外。

required可以用來驗證「必填」欄位！

title可以當作：出現錯誤時的提示文字

pattern可以輸入正規表達式 (Regular Expression) 來做驗證。

撰寫ASP.NET的朋友可以發現：ASP.NET驗證控制項有不少功能，都可以被 HTML5取代
請參閱我以前發表的文章：http://www.dotblogs.com.tw/mis2000lab/archive/2013/10/09/html5_textbox_input_validator.aspx

==== 正規表達式 ====

範例練習 [0-9]{2}[A-Z]{3}，代表「輸入兩個數字、三個大寫英文字」。

本書也提供一些簡單的驗證公式，給大家參考：

[ul] [li]台灣地區身份證編號[A-Z]{1}[0-9]{9}，意思是說：身份證的第一個字，必須是"大寫"的英文字母（即[A-Z]），而後面的九個字必須是數字（即[0-9]）。[/li] [li]台灣地區的郵遞區號([0-9]{3}|[0-9]{5})，意思是說：郵遞區號可能是三個數字「或是」五個數字。如果要強制檢查五碼“數字”的郵遞區號，也可以用\d{5}。[/li][/ul]

這些公式規則並非微軟獨創，早從UNIX時代就已經廣泛運用至今，所以學好規則運算式（Regular Expression）對自己很有幫助。

雖然一開始會讓人頭昏腦脹，但是用慣了也就習慣了。

想想看：如果沒有它的幫助，我們又要花時間寫一大堆Script程式，比較起來算是簡單多了！

微軟官方網站，這篇文章超詳細的
http://msdn.microsoft.com/zh-tw/library/hs600312(v=vs.110).aspx

下一篇文章將會介紹 JavaScript（寫程式）來進行驗證

不要走開，馬上回來。http://ithelp.ithome.com.tw/question/10158769

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110