HTML5 自定義驗證資訊顯示方式

admin發表於2019-04-10
HTML

HTML5內建表單驗證功能，在某種程度上提高了開發效率。

比如要求某個文字框是必填的，只要為其新增required屬性即可。

如果要求內容必須是郵箱格式，只需將input的type屬性值設定為"email"即可。

比使用JavaScript寫驗證規則要方便的多，開發效率上當然也會得到極大提高。

有利必然有弊，雖然驗證非常高效，但是驗證提示資訊和資訊顯示方式過於固定，有事難以滿足專案需求。

當然，HTML5提供瞭解決上述問題的方法，自定義驗證提示資訊參閱setCustomValidity()自定義驗證資訊一文。

本文再來通過程式碼例項介紹一下如何自定義驗證資訊的顯示方式，而不是隻能通過彈出框的形式。

首先看一段程式碼例項：

[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 action="http://www.softwhy.com/"> 
  <input type="text" id="num" required pattern="^\d{3,8}$"/>
  <br/><br/>
  <input type="submit" id="bt" value="提交表單"> 
</form>
</body>
</html>

上述程式碼如果為空，或者填寫內容不符合pattern屬性固定的格式就會報錯。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/10/192718ijqjuztivruabqjz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

報錯方式預設都是以上述類似提示框的方式展現，這是一個硬傷。

因為這樣的顯示方式很難滿足頁面多樣性的需求，難以做到對於任何頁面都完美適配。

如果僅僅是這樣，那麼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>

上述程式碼實現了我們自定義驗證資訊顯示方式的要求，下面對其實現方式進行簡單介紹。

（1）.內建表單驗證規則沒有沒有被滿足的時候，點選表單提交按鈕會觸發invalid事件。

（2）.利用表單元素的validity屬性獲取其當前表單驗證狀態資訊。

（3）.然後利用這些表單驗證狀態資訊定製相應的規則，上述程式碼將驗證資訊顯示於文字框的右側。

（4）.有一點特別重要，那就是事件處理函式中的return false語句，它可以阻止瀏覽器預設行為，也就是阻止預設狀態下以彈出框形式給予驗證資訊的行為。

相關文章