Shulou(Shulou.com)06/03 Report--

Commonly used HTML5 mode pattern is how, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Recently, when I was working on a mobile phone page, I encountered the problem of the keyboard for entering digits. The previous practice was to use type= "tel" across the board, but I always felt that the English letters on the keypad of the phone number of Jiugong GE were too troublesome. So I want to try other implementation schemes, but the final conclusion is frustrating. But also took the opportunity to learn more about the attribute of pattern.

The difference between type= "tel" and type= "number"

Here, let's first explain the problems we first encountered. Neither tel nor number is perfect:

Type= "tel"

The advantage is that the keyboard performance of iOS and Android is similar.

The disadvantage is that those letters are so superfluous. I still feel weird even though I don't have obsessive-compulsive disorder.

Type= "number"

The advantage is that a real numeric keyboard is implemented under Android.

Deficiency 1: it is not a nine-grid keyboard under iOS, so it is not convenient to enter.

Disadvantage two: the old version of Android (including the X5 kernel used by Wechat) had a super chicken-ribbed tail in the back of the input box, but fortunately it was removed after Android 4.4.4.

But for missing point two, we can use the pseudo element private to webkit to drop it to fix:

XML/HTML Code copies content to the clipboard

Input [type=number]::-webkit-inner-spin-button

Input [type=number]::-webkit-outer-spin-button {

-webkit-appearance: none

Appearance: none

Margin: 0

}

Pattern attribute

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

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

Example

Simple digital verification

There are two validations for numbers:

XML/HTML Code copies content to the clipboard

These two regularities have the same effect on form validation, and there is a big difference in performance:

In iOS, only [0-9]\ * can adjust the nine-grid numeric keypad,\ d invalid

Android 4.4 and below (including X5 kernel), both of which adjust the numeric keypad

Android 4.4.4 or above, only the type attribute is recognized, that is, if the above code changes type= "number" to type= "text", the full keyboard will be adjusted instead of the nine-grid numeric keyboard.

Common regular expressions

The usage of pattern is the same. Instead of dwelling on various detailed writing methods, just list some commonly used regularities:

Credit card [0-9] {13516}

UnionPay card ^ 62 [0-5]\ d {13jue 16} $

Visa: ^ 4 [0-9] {12} (?: [0-9] {3})? $

MasterCard: ^ 5 [1-5] [0-9] {14} $

QQ number: [1-9] [0-9] {4pc14}

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 card: ^ ([0-9]) {7Jet 18} (x | X)? $

Password: ^ [a-zA-Z]\ w {5pm 17} $, which starts with a letter and is between 6x18 and contains only letters, numbers and underscores.

Strong password: ^ (? =. *\ d) (? =. * [a murz]) (? =. * [Amurz]). {8pm 10} $contains a combination of uppercase and lowercase letters and numbers, and cannot use special characters. The length is between 8 and 10.

7 Chinese characters or 14 characters: ^ [\ u4e00 -\ u9fa5] {1pr 7} $| ^ [\ dA-Za-z_] {1je 14} $

Browser support

Unfortunately, pattern's browser support is poor:

But if you just change the numeric keypad as mentioned at the beginning of the article, both iOS and Android will be fine.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.