===============================================
本系列文章已經集結出書
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