iT邦幫忙

DAY 14
4

HTML5試試看系列 第 14

[HTML5試試看-14] 表單驗證

HTML5制定了一組通用的屬性及方法,利用這些特性就可以做表單驗證。除了通用的表單元素,一些特殊的表單元素還會內建預設的驗證邏輯。今天先來看一下表單驗證機制怎麼使用,另外要回頭檢視一下HTML5規格書中4.10所提到的所有表單元素,有哪些有特殊的規則。
通用的驗證機制
HTML5制定了幾個驗證機制:

  1. require屬性:如果表單元素設定了這個屬性,代表這個表單元素的值不能為空
  2. 型態不對:一些特別的表單元素,例如email, url, color型態的input元素,內容有一定的規則,不符合規則就無法通過驗證
  3. pattern屬性:表單元素可以設定pattern屬性,內容是regex字串,符合pattern的才能通過驗證
  4. maxlength屬性:表單值的長度不能超過maxlength,否則無法通過驗證
  5. min屬性:表單值必須大於等於min屬性設定的值,否則無法通過驗證(number, range還有日期時間相關型態的input元素)
  6. max屬性:表單值必須小於等於max屬性設定的值,否則無法通過驗證(number, range還有日期時間相關型態的input元素)
  7. step屬性:表單值必須是是step屬性值的整數倍,否則無法通過驗證
  8. 自訂驗證錯誤:使用者可以自己對表單值做檢驗,然後使用表單元素的setCustomValidity(message)方法來顯示驗證錯誤訊息

設定好必要屬性後,使用checkValidity()方法就可以進行驗證。如果傳回值是true,那表示驗證無誤,如果是false,那表示驗證有問題。驗證有問題時,會觸發"invalid"事件,所以也可以透過這個方式顯示驗證的問題。(但是目前一些瀏覽器還沒支援這個事件)

要確定是哪個部份的驗證出問題,可以利用表單元素的validity屬性來檢查。validity物件的定義如下:

 interface ValidityState {
   readonly attribute boolean valueMissing;
   readonly attribute boolean typeMismatch;
   readonly attribute boolean patternMismatch;
   readonly attribute boolean tooLong;
   readonly attribute boolean rangeUnderflow;
   readonly attribute boolean rangeOverflow;
   readonly attribute boolean stepMismatch;
   readonly attribute boolean customError;
   readonly attribute boolean valid;
 };

稍微說明一下:

  1. valueMissing:如果沒有設定值(required屬性已設定)的話,返回true
  2. typeMismatch:如果格式型態不正確(mail, url, color),返回true
  3. patternMismatch:如果不符合設定的pattern,返回true
  4. tooLong:表單值的長度超過maxlength屬性的話,返回true
  5. rangeUnderflow:表單的值小於min屬性的值的話,返回true
  6. rangeOverflow:表單的值大於max屬性的值的話,返回true
  7. stepMismatch:表單的值不是step薯性質的倍數,返回true
  8. customError:透過自訂檢查,呼叫了setCustomValidity()方法並傳入一個字串作為驗證錯誤資訊後,檢查這個值會返回true
  9. valid:如果上述都沒發生,那這個會返回true

透過這樣的方式,就可以省去許多寫程式驗證表單的的功夫,利用表單內建的驗證機制,就能把大部分驗證的功能做出來。即使不足,他也提供了setCustomValidity()來讓客製化的驗證可以與驗證API結合。

例外的元素
keygen雖然屬於表單元素,但是無法對他做驗證。keygen產生的key pair資訊,是在表單實際傳送時才會產生的,無法透過Javascript等程式取得值。(目前測試過是這樣)另外,HTML5規格書也明確規定,表單驗證相關的API不可使用於keygen。

另外,output及fieldset,他的作用是與表單協作,所以也不可做驗證。

最後,寫了一個簡單的表單驗證測試,不過只能在Opera瀏覽器執行:
http://gist.github.com/645287

明天來看Drag and Drop吧。

參賽文章


上一篇
[HTML5試試看-13] 新的表單元素
下一篇
[HTML5試試看-15] 互動機制 - drag and drop
系列文
HTML5試試看30

尚未有邦友留言

立即登入留言