Summary of some common HTML5 patterns (pattern), html5pattern

Summary of some common HTML5 patterns (pattern), html5pattern
This article mainly introduces some common HTML5 patterns (pattern), including some common regular expressions, which are mainly used to create webpages on mobile phones. For more information, see

Recently, when I was working on a mobile phone page, I encountered a number Input Keyboard problem. The previous practice was just to use type = "tel" in a one-size-fits-all manner ", however, I always think that the English letters on the keyboard of the phone number of the jiugongge are too inconvenient. As a result, the final conclusion was frustrating to try other implementation schemes. However, I also took the opportunity to learn more about the pattern attribute.
Type = "tel" and type = "number"

Here we should first explain the problems we encountered. In fact, both tel and number are not perfect:
Type = "tel"

The advantage is that both iOS and Android have similar keyboard performance.
The disadvantage is that those letters are redundant. Although I have no obsessive-compulsive disorder, it still feels strange.

Type = "number"

The advantage is that a real digital keyboard is implemented in Android.
Disadvantage 1: iOS is not a jiugongge keyboard, which is inconvenient to input
Disadvantage 2: The old Android version (including the X5 Kernel used) will have a super chicken tail behind the input box. Fortunately, it will be removed after Android 4.4.4.

But for disadvantage 2, we can fix it with the private pseudo elements of webkit:

Copy XML/HTML Code to clipboard

1. Input [type = number]:-webkit-inner-spin-button,
2. Input [type = number]:-webkit-outer-spin-button {
3. -Webkit-appearance: none;
4. Appearance: none;
5. Margin: 0;
6. }

Pattern attributes

Pattern is used to verify the content of the form input. Generally, the type attribute of HTML5, such as email, tel, number, data class, and url, has provided a simple data format verification function, after adding pattern, the front-end verification is simpler and more efficient.

Obviously, the pattern attribute value must use a regular expression.
Instance
Simple digit Verification

Two numbers are verified:

Copy XML/HTML Code to clipboard

1. <Input type = "number" pattern = "\ d">
2. <Input type = "number" pattern = "[0-9] *">

For form verification, the two regular expressions serve the same purpose, and the performance is significantly different:

In iOS, only [0-9] \ * can be used to enable the jiugongge digital keyboard, \ d is invalid
Android 4.4 or lower (including X5 kernel), both of which enable a digital keyboard;
Android 4.4.4 and later versions only recognize the type attribute. That is to say, if the above Code changes "type =" number "to" type = "text", the entire Keyboard will be upgraded instead of the Nine-cell numeric keyboard.

Common Regular Expressions

The usage of pattern is the same. I will not elaborate on the pattern here, but just list some common 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 phone 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 card: ^ ([0-9]) {7, 18} (x | X )? $
Password: ^ [a-zA-Z] \ w {5, 17} $ starting with a letter, with a length of 6 ~ It can only contain letters, numbers, and underscores.
Strong Password: ^ (? =. * \ D )(? =. * [A-z]) (? =. * [A-Z]). {8, 10} $ a combination of uppercase and lowercase letters and numbers. special characters are not allowed and the length is between 8 and 10.
7 Chinese characters or 14 characters: ^ [\ u4e00-\ u9fa5] {}$ | ^ [\ dA-Za-z _] {} $

Browser support

Unfortunately, the browser support for pattern is miserable:

However, iOS and Android are okay if you change the keyboard as mentioned at the beginning of the article.