Input Pattern Advanced

Introduction

As we know that pattern is used for form validation purposes. In this tutorial, we will see how to write regular expressions using input patterns for username, password, email, and mobile number. These are the most commonly used form fields during form validation. Input Pattern Advanced

1. Username:

A valid and standard username can consists of:

lowercase and capitals or alphanumeric characters.
alphanumeric characters.
underscore and hyphens and spaces.
cannot be two underscores, two hyphens or two spaces in a row.
cannot have an underscore, hyphen or space at the start or end.

Text only : Text can be lowercase letters [a-z] or uppercase letters [A-Z] or combination of both [a-zA-Z].

Text and digits : Username can be a combination of text [a-zA-Z] and digit [0-9] also.

Text-Digit-Special Symbols : Username can consist of text [a-zA-Z], digits [0-9] and special symbols [ ! # $ % & ‘ * + – / = ? ^ _ ` { | } ~ .) together.
<input type=”text” pattern=”^[A-Za-z]w{7,30}”>

Here we will see one example in which username can have,

Only alphanumeric characters, underscore and dot.
Underscore and dot can’t be at the end or start of a username (e.g _username / username_ / .username / username.).
Underscore and dot can’t be next to each other (e.g user_.name).
Underscore or dot can’t be used multiple times in a row (e.g user__name / user..name).
Number of characters must be between 8 to 20.

where, (?=.{8,20}$) = username is 8-20 characters long
(?![_.]) = no _ or . at the beginning
(?!.*[_.]{2}) = no __ or _. or ._ or .. inside
[a-zA-Z0-9._]+ = allowed characters
(?<![_.])$ = no _ or . at the end

2. Email ID:

Validating email is a very important point while validating an html form. The email contains the following ASCII characters.

Uppercase (A-Z) and lowercase (a-z) English letters.
Digits (0-9).
Characters _ –
Character . ( period, dot or full stop) provided that it is not the first or last character and it will not come one after the other.
The domain name [for example com, org, net, in, us, info] part contains letters, digits, hyphens, and dots.
Input Pattern Advanced

Example of valid email id

1. [email protected]
<input type=”email” pattern=”^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$”>

[email protected] | [email protected] | [email protected]
<input type=”email” pattern=”^w+[w-.]*@w+((-w+)|(w*)).[a-z]{2,3}$”>

[email protected]

<input type=”email” pattern=”/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/”>
This pattern matches all types of email id mentioned above.

Example of invalid email id

example.ownexample.com [@ is not present]
@example.me.net [ No character before @ ]
[email protected] [ “.b” is not a valid top-level domain ]
[email protected] [ an email should not be start with “.” ]
example()*@gmail.com [ here the regular expression only allows character, digit, underscore, and dash ]
[email protected] [double dots are not allowed]

3. Password:

Examples of password validation:

1. A password between 7 to 16 characters which contain only characters, numeric digits and underscore and the first character must be a letter.<input type=”password” pattern=”^[A-Za-z]w{7,15}$”>Here w – matches any word character (alphanumeric) including the underscore (equivalent to [A-Za-z0-9_]).We can write the above regular expression as below:

2.A password between 6 to 20 characters which contain at least one numeric digit, one uppercase, and one lowercase letter.

3.A password between 7 to 15 characters which contain at least one numeric digit and a special character.

4.A password between 8 to 15 characters which contain at least one lowercase letter, one uppercase letter, one numeric digit, and one special character.

4. Mobile Number:

The general format of mobile number contains the following :

The first digit should contain numbers between 7 to 9.
The remaining 9 digits can contain any number between 0 to 9.
The mobile number can have 11 digits also by including 0 at the starting.
The mobile number can be of 12 digits also by including +91 at the starting or can be of 15 digits also by including +123, +52, +02346 at the starting.

<input type=”tel” pattern=”^[7|8|9]{1}[0-9]{9}$”> (simple 10 digit number, begin with 7 or 8 or 9 and remaining 9 digits can contain any number between 0 to 9) Input Pattern Advanced