HTML5--表單新特性使用自定義錯誤提示訊息validity屬性
一、HTML5表單新特性
這裡由於不是本文的主要內容,所以就不詳細介紹HTML5表單新特性,需要了解和學習的介意檢視本人的另外一篇文章,裡面有很詳細的介紹關於HTML5的表單的新特性。 網址: http://blog.csdn.net/baidu_25343343/article/details/53140454二、自定義錯誤是什麼?
首先,HTML5的表單中有很多錯誤提示訊息,類似於以下的幾種情況:還有很多這種錯誤的提示資訊,就不一一列舉了 這種錯誤的提示資訊是系統寫死的,如果自定義錯誤資訊呢???? 所謂的自定義錯誤資訊:指的是在提交表單時,如果輸入框中的值不是我們想要的,丟擲一個自定義的錯誤提醒。
三、如何自定義錯誤資訊?
首先我們要了解HTML5為所有表單元素添加了一個JS屬性:input.validity(有效性)
<form action="">
使用者名稱: <input type="text" id="user"/><br/>
<input type="submit" value="提交"/>
</form>
我們給input新增一個id為user,在控制檯輸出user.validity檢視該屬性的內容:
valid:true//當前輸入是否有效
badInput: false //輸入無效,如number框輸入
patternMismatch: false //正則表示式驗證失敗
rangeOverflow: false //輸入值超過max的限定
rangeUnderflow: false //輸入值小於min的限定
tooLong : false //輸入的字元數超過maxlength
tooShort : false //輸入的字元數小於minlength
stepMismatch : false //輸入的數字不符合step限制
typeMismatch : false //輸入值不符合email、url的驗證
valueMissing : false //未輸入值,違反了required要求
customError : false
上述屬性值的特性:
(1)只要有一個驗證方面錯誤,某個屬性就為true,valid值為false
(2)只有沒有任何驗證錯誤,所有的屬性都為false,valid才能為true
(3)上述的每個錯誤在瀏覽器內部都有一個預定義的錯誤提示訊息
(4)所有的錯誤訊息中,只要存在“自定義的錯誤訊息”,瀏覽器只顯示自定義的錯誤訊息,優先順序高於瀏覽器預定義的錯誤訊息
(5)當前沒有自定義錯誤訊息,所以customError : false
所以重點來了,我們怎麼樣自定義錯誤訊息?
設定自定義錯誤訊息的方法:
input.setCustomValidity('錯誤提示訊息');
//這個相當於將input.validity.customError:true
取消自定義錯誤訊息的方法:
input.setCustomValidity("");
//這個相當於將input.validity.customError:false
四、具體演示
<form action="">
使用者名稱: <input type="text" id="user" required/><br/>
<input type="submit" value="提交"/>
</form>
<script>
var user =document.getElementById("user");
user.setCustomValidity("大哥!!!使用者名稱必須填!!!");
</script>
如果要取消自定義訊息,只要設定:user.setCustomValidity("");
總結:
自定義錯誤訊息還是非常方便我們開發的,因為這是HTML5給我們帶來的方便,像以前如果要自定義錯誤訊息必須使用JS打一堆程式碼才行,現在只要簡簡單單設定一行程式碼即可!自定義錯誤訊息使用最多的地方莫過於表單驗證上面了,需要深入瞭解和學習的可以多練練!!!