Pattern is used to verify the input content of the form. 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 efficient. Simple and efficient.
The attribute value of pattern should use a regular expression.
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 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: ^([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, and special characters cannot be used , the length is between 8-10
-
7 Chinese characters or 14 characters: ^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
For example:
Text fields that can only contain three letters (numbers or special characters):
<input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />