HTML5 表單驗證

1、自動驗證
咱們能夠經過元素的屬性設置，進行表單提交的驗證。

required屬性
此屬性能夠應用在大多數輸入元素上（除了隱藏元素、圖片元素按鈕上）。提交時，若是元素爲空，則在瀏覽器中顯示信息提示文字，提示用戶必須輸入內容。具體寫法以下：


pattern屬性
開發者能夠在此屬性中設置正則表達式，提交表單時，會根據pattern中的正則表達式進行檢驗，若是不符合給定的格式時，瀏覽器中會顯示信息提示文字，提示輸入的內容必須符合給定格式。




min與max屬性
min與max屬性是數值類型或日期類型的input元素的專用屬性，他們限制輸入的數值與日期的範圍。

step屬性
控制input元素中值增長或減小時的步幅。當設置step值爲5的時候，必須讓用戶輸入5的倍數才能正常提交，不然會提示文字信息。以下圖：





2、顯示驗證
form元素與input元素（包括select和textarea）都具備一個checkValidity方法。調用該方法，能夠顯示的對錶單內全部元素內容或單個元素內容進行有效性驗證。使用document.getElementById("hh")，使用jQuery選擇報錯，這個方法沒有定義
checkValidity方法以boolean值的形式返回驗證結果。


另外，在HTML5中，form元素與input元素還存在一個validity屬性，該屬性返回一個ValidityState對象，該對象具備不少屬性（此屬性也只能是js獲取才能獲得），但最簡單、最重要的屬性爲valid屬性，它表示了表單內全部元素內容是否有效或單個input元素內容是否有效

3、取消驗證
有兩種方法能夠取消表單驗證。
第一種方法是利用form元素的novalidate屬性，它能夠關閉整個表單驗證。

第二種方法是利用input元素或submit元素的formnovalidate屬性，此屬性可讓表單驗證對單個元素失效。


4、自定義錯誤信息
在HTML5中，可使用JS調用各input元素的setCustomValidity方法來自定義錯誤信息。寫法以下：

相關http://lucifinilhades.iteye.com/blog/1186033