HTML5 setCustomValidity() 自定義驗證資訊

admin發表於2019-03-29
HTML

表單是網頁的核心之一，前端表單驗證自然是一項重要的工作。

此工作是網站優化的一部分，由於不通過伺服器，所以能以較快的響應速度給使用者提示。

HTML5之前，前端表單驗證主要利用原生JavaScript或者相關外掛，相對較為繁瑣。

隨著版本演進，HTML5提供了更為便捷的前端表單驗證方式，像是快餐，可以完全不用JavaScript。

快餐雖然很便捷，但是味道未必好，就如同現在不努力，確實比較逍遙，未來可能會比較辛苦。

預設的驗證資訊提示語言都是固定的，非常的不友好，看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:20px;}  
</style> 
<script>
</script>  
</head>
<body>
<form action="#" method="post">
  <input type="text" pattern="^\d{3,8}$" required>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

上述程式碼通過pattern屬性規定文字框輸入的內容必須是3到8位數字。

當輸入的內容不符合規則的時候，提交表單彈出的提示資訊是完全一樣的。

彈出資訊截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/29/214724pgden9zedoqzbged.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通常應該彈出期待輸入資訊的格式，而不是這種基本上毫無價值的資訊。

HTML5提供了相關的解決方案，使用setCustomValidity方法自定義即可。

此方法屬於對應的表單元素，賦予的引數值即是我們所期待的驗證失敗時的提示語。

上述程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:20px;}  
</style> 
<script>
window.onload=()=>{
  let num=document.getElementById("num");
  num.setCustomValidity("請輸入3-8位數字");
}
</script>  
</head>
<body>
<form action="#" method="post">
  <input type="text" id="num" pattern="^\d{3,8}$" required>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

上述程式碼通過setCustomValidity方法自定義了演示失敗提示語。

當文字框沒有填寫任何內容的時候，點選提交按鈕的提示語截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/29/214811wm24hzv788tjy282.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當文字框輸入內容格式不匹配時候，點選提交按鈕的提示語截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/29/214820nw1ftnb9uu1n1pb3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

兩個提示語完全相同，通常情況下，如果沒有填寫內容那麼給出的提示應該是"不能為空"之類的。

如果填寫格式不對，那麼給出的提示語才是"請輸入3-8位數字"，也就是說簡單的通過setCustomValidity方法設定提示語，雖然在一定程度上滿足了需求，但是會將各種場景的提示語都統一為一種，不人性化。如果HTML5驗證功能的能力僅此而已，那就實在太雞肋的，沒有讓我們失望，可以根據不同的錯誤型別來定義提示語。

上述程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:20px;}  
</style> 
<script>
window.onload=()=>{
  let num=document.getElementById("num");
  let obt=document.getElementById("bt");
  obt.onclick=()=>{
    let v = num.validity;
    if(true === v.valueMessing){
      num.setCustomValidity("欄位不能為空");
    }else{
      if(true === v.patternMismatch){
        num.setCustomValidity("請輸入3-8位數字");
      }else{
        num.setCustomValidity("");
      }
    }
  }
}
</script>  
</head>
<body>
<form action="#" method="post">
  <input type="text" id="num" pattern="^\d{3,8}$" required>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

上面程式碼完美實現了根據不同的表單錯誤，給出相應提示語的效果。

表單元素物件有一個validity屬性，它可以返回一個物件，此物件包含各種型別驗證失敗的判斷功能。

比如表單必需性驗證失敗，那麼此物件的valueMessing屬性返回值為true，輸入的格式不匹配，那麼物件的patternMismatch屬性返回值為true，根據這個特點，可以實現驗證不同錯誤型別，給出不同的錯誤提示的功能。關於validity屬性的更多內容可以參閱validity 屬性一章節。

相關文章