做手機(jī)頁(yè)面時(shí)鱼辙，遇到數(shù)字輸入的鍵盤(pán)的問(wèn)題苗桂，之前的做法只是一刀切的使用 type="tel"，不過(guò)一直覺(jué)得九宮格的電話(huà)號(hào)碼鍵盤(pán)上的英文字母太礙事了。于是想要嘗試其它的實(shí)現(xiàn)方案舟舒，最終的結(jié)論卻令人沮喪拉庶。不過(guò)也趁機(jī)詳細(xì)了解了下pattern這個(gè)屬性。
type="tel" 和 type="number" 的區(qū)別
這里還是先那么先交代一下最初遇到的問(wèn)題秃励。其實(shí)無(wú)論是tel還是number都不是完美的：
type="tel"
優(yōu)點(diǎn)是iOS和Android的鍵盤(pán)表現(xiàn)都差不多
-
缺點(diǎn)是那些字母好多余氏仗，雖然我沒(méi)有強(qiáng)迫癥但還是感覺(jué)怪怪的啊。
[圖片上傳中...(image-fb2657-1510218512899-0)]
type="number"
優(yōu)點(diǎn)是Android下實(shí)現(xiàn)的一個(gè)真正的數(shù)字鍵盤(pán)
缺點(diǎn)一：iOS下不是九宮格鍵盤(pán)夺鲜，輸入不方便
缺點(diǎn)二：舊版Android（包括微信所用的X5內(nèi)核）在輸入框后面會(huì)有超級(jí)雞肋的小尾巴皆尔，好在Android 4.4.4以后給去掉了。
[圖片上傳失敗...(image-42eb84-1510218512901)]
[圖片上傳失敗...(image-ca5b01-1510218512901)]
不過(guò)對(duì)于缺點(diǎn)二币励，我們可以用webkit私有的偽元素給fix掉：
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
pattern屬性
pattern用于驗(yàn)證表單輸入的內(nèi)容慷蠕，通常HTML5的type屬性，比如email食呻、tel流炕、number、data類(lèi)仅胞、url等每辟，已經(jīng)自帶了簡(jiǎn)單的數(shù)據(jù)格式驗(yàn)證功能了，加上pattern后干旧，前端部分的驗(yàn)證更加簡(jiǎn)單高效了渠欺。
顯而易見(jiàn)，pattern的屬性值要用正則表達(dá)式椎眯。
實(shí)例
簡(jiǎn)單的數(shù)字驗(yàn)證
數(shù)字的驗(yàn)證有兩個(gè)：
<input type="number" pattern="\d"> <input type="number" pattern="[0-9]*">
[圖片上傳失敗...(image-e580b3-1510218512901)]
對(duì)表單驗(yàn)證來(lái)說(shuō)挠将，這兩個(gè)正則的作用是一樣的，表現(xiàn)的話(huà)差異就很大：
-
iOS中盅视，只有
[0-9]\*才可以調(diào)起九宮格數(shù)字鍵盤(pán)捐名，\d無(wú)效
Android 4.4以下(包括X5內(nèi)核)，兩者都調(diào)起數(shù)字鍵盤(pán)闹击；
-
Android 4.4.4以上镶蹋，只認(rèn)
type屬性，也就是說(shuō)赏半，如果上面的代碼將
type="number"改為
type="text"贺归，將調(diào)起全鍵盤(pán)而不會(huì)是九宮格數(shù)字鍵盤(pán)。
常用的正則表達(dá)式
pattern的用法都一樣断箫，這里不再啰嗦各種詳細(xì)寫(xiě)法了拂酣，只是列出來(lái)一些常用的正則就好了：
-
信用卡
[0-9]{13,16} -
銀聯(lián)卡
^62[0-5]\d{13,16}$ -
Visa:
^4[0-9]{12}(?:[0-9]{3})?$ 萬(wàn)事達(dá)：
^5[1-5][0-9]{14}$-
QQ號(hào)碼：
[1-9][0-9]{4,14} 手機(jī)號(hào)碼：
^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$身份證：
^([0-9]){7,18}(x|X)?$-
密碼：
^[a-zA-Z]\w{5,17}$字母開(kāi)頭，長(zhǎng)度在6~18之間仲义，只能包含字母婶熬、數(shù)字和下劃線(xiàn)
-
強(qiáng)密碼：
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$包含大小寫(xiě)字母和數(shù)字的組合剑勾，不能使用特殊字符，長(zhǎng)度在8-10之間
7個(gè)漢字或14個(gè)字符：
^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
瀏覽器支持
很不幸赵颅，pattern的瀏覽器支持很慘：
