Some useful HTML5 pattern properties

Recently in the mobile phone page, encountered the problem of digital input keyboard, the previous practice is only one-size-fits-all use type= "tel", but always think nine Gongge phone number on the keyboard of the English letter is too much of a hindrance. To try out other implementations, the final result is frustrating. But also took the opportunity to learn more about the pattern of this property.

Type= the difference between "tel" and type= "number"

Here is the first to explain the first problems encountered. In fact, both Tel and number are not perfect:

Type= "Tel"

• The advantage is that both iOS and Android have the same keyboard performance

• The disadvantage is that the letters are superfluous, although I do not have obsessive-compulsive disorder but still feel strange ah.

Type= "Number"

• The advantage is a true numeric keypad implemented under Android

• Disadvantage one: iOS is not nine Gongge keyboard, input inconvenient

• Disadvantage two: The old version of Android (including the X5 kernel used) after the input box will have a super chicken tail, after the Android 4.4.4 removed.

However, for the disadvantage of two, we can use WebKit private pseudo-element to fix off:

123456

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 contents of form input, usually HTML5 type attribute, such as email, tel, number, data class, URL, etc., has come with a simple data format verification function, plus pattern, the front-end part of the validation is more simple and efficient.

It is obvious that a regular expression is used for the attribute value of pattern.

Instance

Simple Digital Verification

There are two verification of numbers:

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

For form validation, the two regular functions are the same, and the difference in performance is great:

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

• Android 4.4 or less (including the X5 kernel), both of which adjust the numeric keypad;

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

Common Regular Expressions

The use of pattern is the same, there is no longer verbose writing, just list some of the usual regular is good:

• 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}$ letter beginning, length between 6~18, 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 and cannot use special characters, length between 8-10

• 7 Kanji or 14 characters: ^[\u4e00-\u9fa5]{1,7}$|^[\da-za-z_]{1,14}$

Browser support

Unfortunately, the browser support for pattern is miserable:

Some useful HTML5 pattern properties