HTML5 novalidate 屬性

admin發表於2019-04-10
HTML

HTML5內建了很多表單驗證規則，比如為input文字框新增required屬性即可實現必需性驗證。

如果提交表單的時候文字框為空，那麼就會彈出報錯警告框，非常方便。

但是在實際應用中，可能需要禁用這個內建的表單驗證效果。

novalidate屬性的作用就會得以體現，novalidate有no和validate兩個單詞合成：

（1）.no：翻譯成漢語是"不"或者"禁止"的意思。

（2）.validate：翻譯成漢語是"驗證"或者"確認"的意思。

顧名思義，novalidate屬性可以用於禁止表單驗證，此屬性可以用於form元素。

語法結構：

[HTML] 純文字檢視 複製程式碼
<elem novalidate>

瀏覽器支援：

（1）.IE9+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

在對此屬性進行程式碼例項演示之前，首先要解決一個問題，那就是此屬性存在的必要性。

第一種可能，表單元素或者整個表單確實不需要進行驗證，所以採用此屬性。

第二種可能，內建的表單驗證可能不能滿足實際需求，所以要將其禁用，採用自定義方式。

當然不同的情況有不同的考量，本文不可能面面俱到，下面通過程式碼例項演示第一種和第二種。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:50px;}
</style> 
</head>
<body>
<form novalidate> 
  <label for="email"> 郵箱：</label> 
  <input type="email" id="email" required name="email"/> 
  <input type="submit" value="提交"> 
</form>
</body>
</html>

上面程式碼中，郵箱域具有required屬性，預設它是必填的，否則提交表單的時候會彈出提示。

但是由於為form元素新增了novalidate屬性，於是form下的所有表單元素預設都不會進行驗證。

所以，點選提交表單也不會彈出郵箱域不能為空的報錯提示。

應用此屬性後會帶來如下幾個方面的影響：

（1）.表單提交時，內建的驗證規則會失效，比如必需性驗證或者型別驗證不起作用。

（2）.表單提交時，invalid等事件也會失效。

（3）.但是對於與表單元素狀態相關的屬性或者方法並不會失效，比如checkValidity方法與validity屬性。

下面看一段程式碼例項：

[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 email=document.getElementById("email");
  let obt=document.getElementById("bt");
  let error=document.getElementById("error");
  obt.onclick=function(){
    let v=email.validity;
    if(true === v.valueMissing){
      error.style.display="inline-block";
      error.innerHTML="欄位不能為空";
      email.focus();
      return false;
    }else if(true === v.patternMismatch){
      error.style.display="inline-block";
      error.innerHTML="請輸入3-8位數字";
      email.focus();
      return false;
    }
  }
}  
</script>  
</head>
<body>
<form action="http://www.softwhy.com/" novalidate> 
  <input type="email" id="email" required pattern="^\d{3,8}$"/>
  <span id="error">郵箱不能為空</span>
  <br/>
  <input type="submit" id="bt" value="提交表單"> 
</form>
</body>
</html>

為form元素新增novalidate屬性，於是當提交表單時，內建的驗證規則會失效，郵箱域為空也不會報錯。

但是與表單元素驗證狀態相關的屬性依然有效，比如validity屬性，可以利用此屬性來自定義表單驗證效果。

關於validity屬性更多內容可以參閱JavaScript validity 屬性一章節。

相關文章