HTML5 pattern自定義驗證規則

admin發表於2019-03-29
HTML

HTML5提供非常簡便的驗證方式，對於提高開發效率非常有必要。

但是有些驗證的內建規則並不能完全滿足需求，舉兩個例子：

（1）.type="number"可以限定輸入必須數字，但是不能限定輸入數字必須帶有兩個小數。

（2）.type="url"可以限定輸入的必須是url，但是url不僅包含網址，也包括其他地址，只要求輸入網址怎麼辦。

上面舉得兩個例子，這是HTML5內建的規則不能完成的，由此可以看到免費的東西未必總是最好的。

HTML5也提供了彌補上述不足的解決方案，通過pattern屬性可以自定義驗證規則。

首先對pattern屬性進行一下簡單說明，然後再利用它實現前面 提到的兩個驗證。

pattern翻譯成漢語具有"模式"的意思，顧名思義，此屬性用於給表單value值規定一個模式。

它的屬性值是正規表示式，正則內容較多不是本章節介紹內容。

關於正規表示式更多內容可以參閱正規表示式教程板塊。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
</head> 
<body> 
<form action="#" method="post">
  <input type="text" id="txt" pattern="[a-z]{3,5}"/>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body> 
</html>

程式碼分析如下：

（1）.pattern屬性值為"[a-z]{3,5}"。

（2）.可以看到屬性值是一個正規表示式，它匹配長度介於3-5之間，由小寫字母組成的字串。

（3）.文字框輸入的內容需要遵循上述正規表示式所規定的規則，否則會彈出報錯提示。

下面以輸入"Abc"，為例子進行演示，很明顯不符合規則，因為有大寫字母，截圖如下：

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

下面來解決違章開頭提到的兩個問題，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
</head> 
<body> 
<form action="#" method="post">
  <input type="text" required pattern="^[0-9]+(.[0-9]{2})$"/>
  <br/>
  <input type="url" required pattern="(http|https):\/\/([\w.]+\/?)\S*/"/>
  <br/>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body> 
</html>

程式碼分析如下：

（1）.第一個文字框通過pattern屬性規定，輸入的數字必須帶有兩位小數。

（2）.也許有朋友會有這樣的疑問，為什麼不將type屬性值設定為number，這是因為當屬性值為number的時候，並不具有pattern屬性，或者說設定的驗證無效。

（3）.第二個文字框規定輸入的必須是網址，而不是其他型別的url。

特別說明：上面僅僅是為了演示pattern的功能，也許pattern規定的正則並不是最佳。

通過pattern屬性可以根據實際需要定製驗證規則，提高了HTML5驗證的靈活性，但是缺點依然比較明顯。

比如上述程式碼雖然定製了驗證規則，但是彈出的提示並不人性化，比如我們要求數字必須帶兩位小數，當輸入不符合要求的時候，並沒有給出明確的提示；我們想讓報錯提示不是以彈窗形式展示，而是在對應表單元素後面以文字形式提示，預設也是做不到的。不過這一切都是可以解決的，具體可以參閱HTML5 自定義表單驗證一章節。

相關文章