Input Pattern Basics

Introduction

Input Pattern Basics

The pattern attribute is used to add basic data validation in HTML forms.
The ‘pattern’ attribute specifies a regular expression that the <input> element’s value is checked against on form submission.
The pattern attribute works with the text, date, search, URL, tel, email, and password input types.
The global ‘title’ attribute is used to describe the pattern to help the user.

Syntax of the pattern is:
<input pattern=”regexp”>
Or
<input type=”  text/date / search / URL / tel/email/password” pattern=” regexp” title=” message” >
Regexp: specifies a regular expression that the <input> element’s value is checked against.

Some common Special Characters and  Shorthand Characters used while writing pattern is :

Special Characters :

– Escapes the next character. This allows you to match reserved characters [ ], ( ), { }, *, ., +, ? ^, $, |.
[ ] – Character class. Matches any character contained between the square brackets.
[^ ] – Negated character class. Matches any character that is not contained between the square brackets.
{n,m } – Braces. Matches at least “n” but not more than “m” repetitions of the preceding symbol.
( ABC) – Character group. Matches the characters ABC in that exact order.
| – Alternation. /matches either the characters before or the characters after the symbol.
. – Period or dot matches any single character except a line break.
* – Matches 0 or more repetitions of the preceding symbol.
+ – Matches 1 or more repetitions of the preceding symbol.
^ – Matches the beginning of the input.
$ – Matches the end of the input.
? – Matches the preceding symbol optional.

Shorthand Characters :

/d – short for [0-9]. Match a character that is a digit.
/D – matching non-digit: [^d].
/w – stands for “word character”. It always matches the ASCII characters [A-Za-z0-9_]. Matches a single-word character.
[W] – matches a single character that is not a word character
/s – sands for “whitespace character”. Again, which characters this includes depends on the regex flavour, it includes [ trnf]. That is s matches space, a tab, a carriage return, a line feed, or a form feed. Input Pattern Basics

Examples:

Full Stop(.) –

For example, the regular expression .e means any character, followed by the letter e.
.e => The meta character.
<input type=”text” pattern=”.e”>

Character set [] –

For example, the regular expression [Tt]he means: an uppercase T or lowercase t, followed by the letter h, followed by the letter e.
[Tt]he => The meta character, the character set.
<input type=”text” pattern=”[Tt]he”>

Negated character set [^ ] –

For example, the regular expression [^c]ar means: any character except c, followed by
By the letter r.
[^c]ar => The car is parked in the garage.
<input type=”text” pattern=”[^c]ar”>

The star (*) –

The regular expression a* means: zero or more repetition of the preceding lowercase character a. But if it appears after a character set then it finds the repetition of the whole character set.
For example, the regular expression [A-Z]* means any number of uppercase in a row. And the regular expression [a-z]* means any number of lowercase letters in a row.

[A-Z]* => The meta character.
<input type=”text” pattern=”[A-Z]*”>

[a-z]* => The meta character.
<input type=”text” pattern=”[a-z]*”>

The plus(+) –

The regular expression a+ means one or more repetitions of the preceding lowercase character a. But if it appears after a character set then it finds the repetition of the whole character set. The regular expression [a-z]+ means: one or more lowercase letters in a row.

[a-z]+ => see the cat run
<input type=”text” pattern=”[a-z]+”>

.+(the cat)$ => watch the cat
<input type=”text” pattern=”[.+(the cat)$]”>

This regular expression matches the line that starts with any word but ends with ‘the cat’.

The question mark(?) –

In regular expression the metacharacter? makes the preceding character optional. This symbol matches zero or one instance of the preceding character. For example, the regular expression [T]? he means: Optional the uppercase letter T, followed by the lowercase character h, followed by the lowercase character e.

[T]? he => The cat is running, watch the cat.
<input type=”text” pattern=”[T]?he”>

Braces [] { , } –

The braces that are used in the regular expression are also called quantifiers are used to specify the number of times that a character or a group of characters can be repeated. For example, the regular expression [0–9]{2,3} means: Match at least 2 digits but not more than 3
Note: ( characters in the range of 0 to 9). Input Pattern Basics

[0-9]{2,3} => 123 (true)
[0-9]{2,3} => 12 (true)
[0-9]{2,3} => 1234 (false)

[0-9]{3, } => it means 3 or more digit.

[0-9]{4} => it means exactly 4 digits.

<input type=”tel” pattern=”[0-9]{10} ”>
<input type=”number” pattern=”[0-9]{5,10} ”>

Alternation (|) –

For example, the regular expression (T|t)he|cat means: uppercase character T or lowercase t, followed by lowercase characters h and e or lowercase characters c, a, and t.

(T|t)he|cat => The cat is running, watch the cat on mat #234.
<input type=”text” pattern=”(T|t)he|cat”>

Escaping Special character( backslash) –

For example, the regular expression. is used to match any character except a newline.  Now to match. in an input string the regular expression (c|w)at.? Means: lowercase letter c or w followed by lowercase character a and t, followed by optional. character.

(c|w)at.? => The cat is running, watch the cat #234.
<input type=”text” pattern=”(c|w)at.?”>

Caret(^) –

The caret ^ symbol is used to check if a matching character is the first character of the input string. For example, the regular expression ^T.* means: it matches the string that starts with uppercase T followed by optional. character, followed by zero or more repetitions of the preceding character or symbol.

^T.* => The cat is running.
See the cat.
Watch the dog barking.
<input type=”text” pattern=”^T.*”>

In the above example, the out is “The cat is running” because this sentence starts with ‘T’ among the group of sentences.

Dollar($) –

Dollar $ symbol is used to check if a matching character is the last character of the input string. For example, the regular expression. (.*[0-9])$ means: it matches the string that starts with zero or more characters but ends with a digit only.

(.*[0-9])$ =>Watch the dog barking098 123
<input type=”text” pattern=”(.*[0-9])$”>

If I write the above regular expression like this ([0-9]) then it will select only digits that are present in a string at any position.

([0-9]) => Watc0h the5 dog6 barking098 98 Input Pattern Basics