HTML5 setCustomValidity() 自定義驗證資訊

admin發表於2019-03-29

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

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

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 屬性一章節。

相關文章