html5的setCustomValidity的詳細介紹
1. 預設提示
<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);
登入後複製
以上是html5的setCustomValidity的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
如何修復KB5055523無法在Windows 11中安裝?
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝?
3 週前
By DDD
R.E.P.O.的每個敵人和怪物的力量水平
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>:死鐵路 - 如何馴服狼
3 週前
By DDD
藍王子:如何到達地下室
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)