一些有用的HTML5 pattern

一些有用的html5 pattern

最近在做手機頁面時，遇到數字輸入的鍵盤的問題，之前的做法只是一刀切的使用type="tel"，不過一直覺得九宮格的**號碼鍵盤上的英文本母太礙事了。於是想要嘗試其它的實現方案，最終的結論卻令人沮喪。不過也趁機詳細了解了下pattern這個屬性。

type="tel"和type="number"的區別

這裡還是先那麼先交代一下最初遇到的問題。其實無論是tel還是number都不是完美的：

不過對於缺點二，我們可以用webkit私有的偽元素給fix掉：

input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button

pattern用於驗證表單輸入的內容，通常html5的type屬性，比如email、tel、number、data類、url等，已經自帶了簡單的資料格式驗證功能了，加上pattern後，前端部分的驗證更加簡單高效了。

顯而易見，pattern的屬性值要用正規表示式。

例項簡單的數字驗證

數字的驗證有兩個：

對表單驗證來說，這兩個正則的作用是一樣的，表現的話差異就很大：

pattern的用法都一樣，這裡不再囉嗦各種詳細寫法了，只是列出來一些常用的正則就好了：

很不幸，pattern的瀏覽器支援很慘

但是如果只是如文章開頭提到的改數字鍵盤的話，ios和android都是沒有問題的。