JavaScript validity 屬性

admin發表於2019-03-30
JavaScript

validity屬性是HTML5新增，從名稱來看應該與表單驗證相關。

事實也是如此，此屬性可以返回一個包含驗證相關資訊的ValidityState物件。

HTML5為我們提供了實現簡便表單驗證的途徑，但是簡便的成本就是比較粗糙。

當然，HTML5也有能力根據需求定製表單驗證規則與表現方式，那麼對ValidityState掌握是必不可少的。

可以根據此物件獲取當前表單的驗證狀態，從而定製不同的驗證規則與驗證表現方式，下面會分步詳細介紹。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
v=dom.validity

引數解析：

（1）.dom：一個表單元素物件。

（2）.v：返回的ValidityState物件。

一.此屬性的必要性：

前面提到過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");
  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方法自定義驗證失敗提示資訊。

關於setCustomValidity方法更多內容參閱HTML5 setCustomValidity()自定義驗證資訊一章節。

但是我們可以發現一個問題，那就是無論文字框為空，還是內容填寫格式錯誤，提示語言完全相同。

而實際應用中，通常期望根據不同的錯誤，給出相應明確提示，比如：

（1）.內容為空：提示"文字框內容不能為空"。

（2）.格式不對：提示"填寫內容必須是3-8位數字"。

利用validity屬性返回的ValidityState物件對當前驗證狀態進行判斷，然後定製不同的驗證提示即可解決。

二.validity屬性：

表單元素物件具有此屬性，返回值是一個ValidityState物件。

ValidityState物件的名稱是合成詞，如有兩個單詞構成：

（1）.validity：翻譯成漢語具有"驗證"的意思。

（2）.state：翻譯成漢語具有"狀態"的意思。

顧名思義，此物件包含有表單元素與驗證狀態相關的資訊。

程式碼例項如下：

[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=()=>{
    console.log(num.validity);
  }
}
</script>  
</head>
<body>
<form action="#" method="post">
  <input type="text" id="num" required>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

當文字框內容為空的時候，點選提交按鈕會彈出一個驗證失敗提示。

此時ValidityState物件包含了相關資訊，截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/30/181033pp7ei1627r7te671.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此物件具有多個屬性，屬性值代表著當前表單元素的相關驗證狀態。

相關屬性說明如下：

（1）.badInput：標識當前輸入是否是無效輸入，比如number控制元件，輸入的卻是字串，true表示無效輸入。

（2）.customError ：標識當前是否是自定義驗證錯誤資訊，true表示是。

（3）.patternMismatch：標識輸入內容是否與pattern規定的規則匹配，true表示是。

（4）.rangeOverflow：標識輸入的數值是否超過max屬性限制，true表示超過。

（5）.rangeUnderflow：標識輸入的數值是否小於min屬性限制，true表示小於。

（6）.stepMismatch：標識輸入的數值是否符合step屬性限制，true表示不符合。

（7）.tooLong：標識輸入的字串長度是否超過maxlength屬性限制，true表示超過。

（8）.tooShort：標識輸入的字串長度是否小於minlength屬性限制，true表示小於。

（9）.typeMismatch：標識輸入的內容是否格式不符合規定，不符合url或者email等限制，true表示不符合。

（10）.valid：標識當前表單輸入是否完全符合要求，true表示滿足。

（11）.valueMissing ：標識當前表單元素未滿足required要求，true表示未滿足。

特別說明：只要有一個地方不滿足驗證條件，valid屬性值就為false。

那麼我們就可以根據上述特點，優化一下我們前面的程式碼，達到驗證錯誤資訊精準提示的效果。

程式碼例項如下：

[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.valueMissing){
      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>

上面的程式碼實現了不同錯誤，給出不同錯誤提示的功能。

程式碼簡單分析如下：

（1）.true === v.valueMessing為真，說明當前文字框為空，沒有填寫任何內容，也就是違反了required必需性驗證，那麼通過setCustomValidity方法自定義錯誤提示資訊為"欄位不能為空"。

（2）.true === v.patternMismatch為真，說明當前輸入的內容不符合pattern屬性規定正規表示式的限定，那麼通過setCustomValidity方法自定義錯誤提示資訊為"請輸入3-8位數字"。

通過對validity屬性的良好掌握，可以讓我們對HTML5驗證基本做到知其然知其所以然的目的，不但可以靈活自定義驗證效果，由此也能達到心裡比較敞亮的功效，可能對延長壽命有一定幫助。

相關文章