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(&#39;#submit1&#39;).addEventListener(&#39;click&#39;,function(){        
    var $text1= document.querySelector(&#39;#text1&#39;);

        $text1.validity.valueMissing
            ?$text1.setCustomValidity(&#39;The value can\&#39;t be empty.&#39;)
            : $text1.setCustomValidity(&#39;&#39;);
    },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);

以上是html5的setCustomValidity的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！