Detailed explanation of the usage of pattern attribute in HTML5

Recently when I was working on a mobile page, I encountered a problem with the keyboard for numeric input. The previous approach was to use type="tel" across the board, but I always felt that the English letters on the Jiugongge phone number keyboard were too obstructive. So I wanted to try other implementation solutions, but the final conclusion was frustrating. However, I also took the opportunity to learn more about the attribute of pattern.

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

Let me first explain the initial problems encountered. In fact, neither tel nor number are perfect:

type="tel"

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

The disadvantage is that those letters are so redundant. Although I don’t have obsessive-compulsive disorder, it still feels weird.

type="number"

The advantage is a real numeric keyboard implemented under Android

Disadvantage 1: iOS does not have a nine-square grid keyboard, making input inconvenient

Disadvantage 2: Older versions of Android (including the X5 kernel used by WeChat) will have a super tasteless little tail behind the input box. Fortunately, it has been removed after Android 4.4.4.

But for the second shortcoming, we can use webkit's private pseudo-element to fix it:

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 content of the form input, usually HTML5 Type attributes, such as email, tel, number, data class, url, etc., already have simple data format verification functions. After adding pattern, the verification of the front-end part becomes simpler and more efficient.

Obviously, the attribute value of pattern should use regular expression.

Example

Simple digital verification

There are two types of digital verification:

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

For form verification, this The functions of the two regular expressions are the same, but the performance is very different:

On iOS, only [0-9]* can activate the nine-square numeric keyboard, \d is invalid

Android 4.4 and below (including the ="text" will bring up the full keyboard instead of the nine-square numeric keyboard.

Commonly used regular expressions

The usage of pattern is the same. I won’t go into details here. I 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 card: ^([0 -9]){7,18}(x| , can only contain letters, numbers and underscores

Strong password: ^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$ Contains a combination of uppercase and lowercase letters and numbers.

cannot be used. The length is between 8-10

7 Chinese characters or 14 characters: ^[\u4e00-\u9fa5]{ 1,7}$|^[\dA-Za-z_]{1,14}$Unfortunately, the browser support for pattern is very poor: via Can I Use

But if But if you change the numeric keyboard as mentioned at the beginning of the article, there will be no problem on both iOS and Android.

The above is the detailed content of Detailed explanation of the usage of pattern attribute in HTML5. For more information, please follow other related articles on the PHP Chinese website!