JavaScript invalid 事件

admin發表於2019-04-10
JavaScript事件

程式語言中，名稱總是能夠體現功能，所以掌握一個概念的功能可以從其名稱入手。

invalid由in與valid組合而成，in在語法中表示否定的意思，valid翻譯成漢語具有"有效"或者"健全"的意思。

那麼兩者組合起來表示"無效"或者"不健全"，顧名思義，此事件在HTML5內建表單驗證失敗時觸發。

關於事件處理函式註冊，可以參閱如何註冊事件處理函式一章節。

瀏覽器支援：

（1）.IE9+瀏覽器支援此事件。

（2）.edge瀏覽器支援此事件。

（3）.火狐瀏覽器支援此事件。

（4）.Opera瀏覽器支援此事件。

（5）.谷歌瀏覽器支援此事件。

（6）.safria瀏覽器支援此事件。

invalid事件主要特點：

（1）.事件不具有冒泡階段。

（2）.事件具有捕獲階段。

（3）.任何一個HTML5內建驗證規則沒有滿足，都會觸發此事件。

首先介紹一下此事件的上述三個特點：

關於事件冒泡和事件捕獲相關知識本文不再介紹，可以參閱如下兩篇文章：

（1）.事件冒泡可以參閱JavaScript 事件冒泡一章節。

（2）.事件捕獲可以參閱JavaScript 事件捕獲一章節。

關於內建驗證規則需要稍稍注意，比如為文字框新增required屬性，如果文字框為空，那麼驗證失敗。

此時invalid事件會觸發，因為required屬於HTML5內建的驗證規則，通過pattern屬性配置的規則，也屬於HTML5內建規則。

但是如下驗證失敗，則不會觸發invalid事件，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:50px;}
</style> 
<script>
window.onload=function(){
  let num=document.getElementById("num");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    if(num.value==""){
      alert("文字框不能為空");
      return false;
    }
  }
}  
</script>  
</head>
<body>
<form action="http://www.softwhy.com/"> 
  <input type="text" id="num"/>
  <input type="submit" id="bt" value="提交表單"> 
</form>
</body>
</html>

點選提交按鈕，如果文字框為空，那麼會彈出報錯提示，但是invalid事件不會被觸發。

因為上述程式碼並不是因為未滿足HTML5內建驗證規則而報錯，只是一個簡單的邏輯判斷。

可以利用invalid事件對HTML5內建驗證規則進行靈活應用，從而定製我們所需要的表單驗證。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:50px;}
#error{
  display:none;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let num=document.getElementById("num");
  let obt=document.getElementById("bt");
  let error=document.getElementById("error");
  num.oninvalid=function(){
    let v=num.validity;
    if(true === v.valueMissing){
      error.style.display="inline-block";
      error.innerHTML="欄位不能為空";
      num.focus();
      return false;
    }else if(true === v.patternMismatch){
      error.style.display="inline-block";
      error.innerHTML="請輸入3-8位數字";
      num.focus();
      return false;
    }
  }
}  
</script>  
</head>
<body>
<form action="http://www.softwhy.com/"> 
  <input type="text" id="num" required pattern="^\d{3,8}$"/>
  <span id="error">郵箱不能為空</span>
  <br/>
  <input type="submit" id="bt" value="提交表單"> 
</form>
</body>
</html>

在預設狀態下，如果內建驗證規則沒有得到滿足，表單提交時會以彈出警告的形式給出提示資訊。

上面程式碼通過invalid事件實現對錶單驗證資訊的定製功能，當文字框驗證不通過時，會在其右側給出提示資訊。

特別說明：只要任何一個HTML5內建驗證規則沒有得到滿足，都會觸發此事件。

相關文章