不該該被濫用的 input 屬性

前兩天接到了一個需求：手機號、身份證、驗證碼 須要校驗，檢驗規則包括長度、內容。

想法是有一堆，可是不知道好使很差使，咱們今天來整理一下咯。先來講說都有什麼想法

1. html 的標籤屬性

   1. type
   2. pattern
   3. min、max
   4. minlength、maxlength

2. js 的事件監聽

   1. value 獲取值（vue 使用 v-model）
   2. @input 監聽改變

接下來就是咱們你們都很期待的理想很豐滿，現實很骨感環節。

html 的標籤屬性

type 輸入類型

用於限制輸入類型，咱們這裏只介紹咱們有可能會有到的。每一個 type 每每會帶有一些特性，咱們來看一下吧。

1. date 輸入日期的控件（年、月、日，不包括時間）。在支持的瀏覽器激活時打開日期選擇器或年月日的數字滾輪。
2. datetime-local 輸入日期和時間的控件，不包括時區。在支持的瀏覽器激活時打開日期選擇器或年月日的數字滾輪。
3. email 編輯郵箱地址的區域。相似 text 輸入，但在支持的瀏覽器和帶有動態鍵盤的設備上會有確認參數和相應的鍵盤。
4. number 用於輸入數字的控件。若是支持的話，會顯示滾動按鈕並提供缺省驗證（即只能輸入數字）。擁有動態鍵盤的設備上會顯示數字鍵盤。
5. password 單行的文本區域，其值會被遮蓋。若是站點不安全，會警告用戶。
6. search 用於搜索字符串的單行文字區域。輸入文本中的換行會被自動去除。在支持的瀏覽器中可能有一個刪除按鈕，用於清除整個區域。擁有動態鍵盤的設備上的回車圖標會變成搜索圖標。
7. tel 用於輸入電話號碼的控件。擁有動態鍵盤的設備上會顯示電話數字鍵盤。
8. text 默認值。單行的文本區域，輸入中的換行會被自動去除。
9. url 用於輸入 URL 的控件。相似 text 輸入，但有驗證參數，在支持動態鍵盤的設備上有相應的鍵盤。

能夠看到裏面支持功能最多的就是動態鍵盤和驗證，剛好這兩個功能都是咱們須要的。

pattern、min、max、minlength、maxlength 這些屬性其實都是針對於特定的 type 。（這點沒想到吧，好了，咱們看下去）

測試地址：https://www.lilnong.top/static/html/sf-1190000037538101-html-input-attribute-type-pattern-min-max-minlength-maxlength.html

pattern

只支持 type 爲 password, text, tel。
檢查控件值的正則表達式。pattern 必須匹配整個值，而不單單是某些子集。

min、max

只支持 type 爲 number。
這個屬性指明瞭用戶（最小、最大）（數字或日期時間）能夠輸入的值

minlength、maxlength

只支持 type 爲 password、 search、 tel、 text、 url。
這個屬性指明瞭用戶（最少、最多）能夠輸入的字符個數（按照Unicode編碼方式計數）

如何獲取校驗狀態

能夠看到，上面有一些校驗相關的內容，咱們如何使用他呢？

1. css 方法：
   :valid、:invalid
2. html 方法：
   表單提交的時候
3. js 方法：
   ValidityState

獲取輸入的內容

好像沒有比這個更簡單的了，比較咱們天天都在使用。

原生：el.value
Vue：v-model

可是事情沒有這麼簡單，若是使用了html的檢驗，若是校驗沒有經過，獲取的是空串

測試

type="number" 時，沒法獲取多餘的.

type="number" 時，異常value沒法獲取

經過 validationMessage 和 validity 來獲取當前異常的狀態

微信公衆號：前端linong

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。

參考資料

1. MDN <input>：輸入（表單輸入）元素
2. ValidityState