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吧。

參賽文章