iT邦幫忙

DAY 12
5

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

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

  • 分享至 

  • xImage
  •  

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


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#11--jQuery簡介(II)
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#13--採用JavaScript進行驗證
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言