html5的setCustomValidity的詳細介紹

1. 默認提示

html5豐富了表單驗證，例如：

<form>      <input type=text required />      <input type=submit></form>

如果text中沒有輸入內容，點擊提交按鈕，會提示“請填寫此字段。”

事件順序如下：
（1）submit按鈕的click事件，若取消默認事件，則終止
（2）html5表單驗證和提示，若表單驗證不通過，則提示第一個不合法輸入，并終止
（3）form表單的submit事件，若取消默認事件，則終止

注意：
用js觸發form的submit事件，會直接進入第（3）步，不會進行html5表單驗證。
所以，要想出現html5的驗證提示，必須經過submit按鈕。

2. 自定義提示

使用setCustomValidity設置了自定義提示后，
validity.customError就會變成true，則checkValidity總是會返回false。
而且，表單驗證是根據checkValidity來決定是否提示的。

所以，應該使用validity的以下屬性來設置和取消自定義提示：

badInput，customError，patternMismatch，rangeOverflow，rangeUnderflow，stepMismatch，tooLong，  typeMismatch，valid，valueMissing

注意：
以上屬性值是只讀的，手動修改是無效的。

其中，取消自定義提示的方式如下：

setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

例子：

<form>      <input id=text1 type=text required />      <input id=submit1 type=submit></form><script>      document.querySelector('#submit1').addEventListener('click',function(){              var $text1= document.querySelector('#text1');            $text1.validity.valueMissing              ?$text1.setCustomValidity('The value can't be empty.')              : $text1.setCustomValidity('');      },false);</script>

或者：

$text1.setCustomValidity((function(){      if($text1.validity.valueMissing){          return 'The value can't be empty.';      }    //不寫return或者寫“return;”表示“return undefined;”}()));

3. 驗證成功后ajax提交

考慮到事件順序，form的submit事件中只有在表單驗證通過后才會觸發。
所以，可以在form的submit事件中，通過取消默認行為，用ajax提交數據。

例子：

document.querySelector('#form1').addEventListener('submit',function(e){    //ajax        e.preventDefault();  },false);