一、HTML5表單新特性

二、自定義錯誤是什麼？

三、如何自定義錯誤資訊?

<form action="">
    使用者名稱: <input type="text"   id="user"/><br/>
    <input type="submit" value="提交"/>
</form>

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("");