Reprinted from: https://www.qianduan.net/xie-you-yong-de-html5-pattern/

Some useful HTML5 patterns

24 September 2015

Recently, when I was working on a mobile phone page, I encountered a problem with the keyboard for number input. The previous method was to use it across the board type="tel", but I always felt that the English letters on the phone number keyboard of Jiugongge were too annoying. So I wanted to try other implementations, but the final result was frustrating. However, I also took the opportunity to learn more about patternthis property.

type="tel" difference type="number" between

Here is the first to explain the first problem encountered. In fact, neither tel nor number are perfect:

type="tel"

The advantage is that both iOS and Android keyboards behave similarly
The downside is that those letters are superfluous, and although I don't have OCD, it still feels weird.

type="number"

The advantage is a real numeric keyboard implemented under Android
Disadvantage 1: It is not a nine-square grid keyboard under iOS, which is inconvenient to input.
Disadvantage 2: The old version of Android (including the X5 kernel used by WeChat) will have a super tasteless little tail behind the input box. Fortunately, it was removed after Android 4.4.4.

However, for the second disadvantage, we can fix it with webkit's private pseudo-elements:

input[type=number]::-webkit-inner-spin-button,  
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
    }

pattern property

Pattern is used to verify the content of form input. Usually, the type attribute of HTML5, such as email, tel, number, data class, url, etc., already has a simple data format verification function. After adding pattern, the verification of the front-end part is more Simple and efficient.

Obviously, the attribute value of pattern uses a regular expression.

Example

Simple digital verification

There are two verifications of numbers:

<input type="number" pattern="\d">  
<input type="number" pattern="[0-9]*">

For form validation, these two regulars have the same effect, and the performance is very different:

In iOS, only [0-9]* can activate the nine-square numeric keyboard, and \d is invalid
Android 4.4 and below (including X5 kernel), both call up the numeric keyboard;
Android 4.4.4 and above, only the type attribute is recognized, that is to say, if the above code changes type="number" to type="text", it will call up the full keyboard instead of the nine-square numeric keyboard.

Commonly used regular expressions

The usage of pattern is the same, so I won't go into details here, just list some commonly used regular expressions:

credit card[0-9]{13,16}
UnionPay Card^62[0-5]\d{13,16}$
Visa: ^4[0-9]{12}(?:[0-9]{3})?$
Mastercard: ^5[1-5][0-9]{14}$
QQ number: [1-9][0-9]{4,14}
Mobile number: ^(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}$
ID: ^([0-9]){7,18}(x|X)?$
Password: ^[a-zA-Z]\w{5,17}$ starts with a letter, the length is between 6 and 18, and can only contain letters, numbers and underscores
Strong password: ^(?=. \d)(?=. [az])(?=.*[AZ]).{8,10}$ Contains a combination of uppercase and lowercase letters and numbers, special characters cannot be used, length between 8-10
7 Chinese characters or 14 characters: ^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$

Browser support

Unfortunately, browser support for pattern is miserable: via Can I Use

But if you just change the numeric keyboard as mentioned at the beginning of the article, there is no problem with iOS and Android.

html5 pttern