Several Useful HTML Patterns for Masking

Importing data correctly from a web page is very important for a developer. We use masks, functions, regexes, etc. In these days, I start to use pattern attribute of HTML input element. It's very useful.

Visit Mozilla for more information.

If you want that user can enter one digit, pattern should be like this:

<input type="text" pattern="[1,9]{1}" />

If you need to show HTML validation messages, you can add title to input. When you try to submit the form, the message will be show up.

<input type="text" pattern="[1,9]{1}" title="One digit between 1 and 9" />

Several Useful Patterns

[0-9]{4} Four digits
[1-9][0-9]{4} First digit should be greater than zero, total 5 digit
(?=._\d)(?=._[a-z])(?=.\*[A-Z]).{8,} Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters
.{8,} Eight or more characters
[a-z]{3} Three lowercase letters
[A-Z]{3} Three uppercase letters
[A-Za-z]{3} Three uppercase or lowercase letters
[A-Za-z]{3,8} Uppercase or lowercase 3 or 8 letters
[A-Z]{1}[0-9]{1} One uppercase letter and one digit
[ABC]{1} One uppercase letter of A, B or C
[^'\x22]+ Banned ' and " Characters
^A starts with A
A\$ ends with A
^A[a-zA-Z]{2}Z\$ Starts with A, ends with Z and total 4 letters
https?://.+ Include http:// or Include https://
[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}\$ E-Mail Address
[a-z]{4,8} Usernames must be lowercase and 4-8 characters in length

Regex Cheatsheet

You can use regex rules to create your own regex to use it in input pattern.

. any character except
\w \d \ word, digit,
\W \D \ not word, digit,
[abc] any of a, b, or
[^abc] not a, b, or
[a-g] character between a &
^abc$ start / end of the
\b \B word, not-word
\. \* \\ escaped special
\t \n \r tab, linefeed, carriage
(abc) capture
\1 backreference to group
(?:abc) non-capturing
(?=abc) positive
(?!abc) negative
a* a+ a? 0 or more, 1 or more, 0 or
a{5} a{2,} exactly five, two or
a{1,3} between one &
a+? a{2,}? match as few as

Visit regexr.com for more regexes.