Regular Expression Masks

• Apr 18, 2023
• 10 minutes to read

Use a regular expression mask in a Masked Input to create advanced masks with the following attributes:

• Variable length
• Multiple acceptable patterns
• Specific character range input

For example, you can use Regular Expression masks for email and IP addresses, strings of the specified length, and so on.

Run Demo: Masked Input — Regular Expression Mask

For information on other mask types, refer to the following topic: Masks.

Apply a Mask

A Regular Expression mask is a string that can include metacharacters, quantifiers, and literal characters. To apply a mask to a Masked Input, set the component’s MaskMode property to MaskMode.RegEx and assign the required pattern to the Mask property. The regular expression’s syntax is similar to the POSIX ERE specification.

The DxRegExMaskProperties component specifies additional mask-related settings (for example, a placeholder, autocomplete mode, or current culture).

<DxMaskedInput @bind-Value="Value"
               Mask="\d{3,10}" 
               MaskMode="@MaskMode.RegEx">
    <DxRegExMaskProperties Placeholder="Placeholder" />
</DxMaskedInput>

@code{
    String Value { get; set; }
    char Placeholder = '#';
}

Metacharacters

Metacharacters specify characters users can enter at the corresponding positions. The table below lists the available metacharacters.

Character	Description	Sample
.	Any single character.	. Matches: any single alphanumeric character
[xyz]	Any single character from the specified character set.	[aeiou] Matches: a, e, i, o, or u
[^xyz]	Any single character except the specified character set.	[^aeiou] Matches: b, c, f, 2, # and so on
[x-y]	Any single character from the specified character range.	[0-9a-z] Matches: digits from 0 to 9 and characters from a to z
\w	Any single alphanumeric character. The same as [a-zA-Z_0-9].	\w Matches: digits from 0 to 9, characters from a/A to z/Z
\W	Any single non-alphanumeric character. The same as [^a-zA-Z_0-9].	\W Matches: @, #, $ and so on
\d	Any digit. The same as [0-9].	\d Matches: digits from 0 to 9
\D	Any single non-numeric character. The same as [^0-9].	\D Matches: a, b, c, # and so on
\s	Matches any white-space character (for example, space, tab).	\s Matches: space, tab, and so on
\S	Matches any non-white-space character.	\S Matches: “” (empty string) a, aB, and so on
\x00	An ASCII character specified by its hexadecimal representation (two digits).	\x24 Inserts the $ character as a literal
\uFFFF	Matches a Unicode character specified by its hexadecimal representation (four digits). Note that this specification does not support Unicode characters specified by five or more digits.	\u003C Inserts the < character as a literal
\p{category}, where category is a Unicode character category name.	Any character from the specified Unicode character category. For example, \p{Lu} stands for an uppercase letter. The list below enumerates samples of Unicode categories: Letter (L) - any letter. UppercaseLetter (Lu) - an uppercase letter. Entered characters are converted to uppercase. LowercaseLetter (Ll) - a lowercase letter. Entered characters are converted to lowercase. Number (N) - any number. Symbol (S) - a mathematical symbol, currency symbol, or a modifier symbol. Punctuation (P) - any punctuation mark. Separator (Z) - any separator.	\p{S} Matches: +, -, $, and so on
\P{category}, where category is a Unicode character category name.	Any character that does not belong to the specified Unicode character category.	\P{S} Matches: a, 1, (space), and so on
\R.	Matches the decimal separator specified by the NumberDecimalSeparator property of the current culture.	Inserts the culture-dependent decimal separator (for example, .) as a literal.
\R:	Matches the time separator specified by the TimeSeparator property of the current culture.	Inserts the culture-dependent time separator (for example, :) as a literal.
\R/	Matches the date separator specified by the DateSeparator property of the current culture.	Inserts the culture-dependent date separator (for example, /) as a literal.
\R{character}, where character is a character name.	The specified character. For example, \R{CurrencySymbol} stands for the culture’s currency symbol. The following character names are available: DayNames - a culture-specific full weekday name. The culture’s DayNames property specifies day names. MonthNames - a culture-specific full month name. The culture’s MonthNames property specifies month names. AbbreviatedDayNames - a culture-specific abbreviated weekday name. The culture’s AbbreviatedDayNames property specifies abbreviated day names. AbbreviatedMonthNames - a culture-specific abbreviated month name. The culture’s AbbreviatedMonthNames property specifies abbreviated month names. AMDesignator - the string designator for hours that are “ante meridian” (before noon). The culture’s AMDesignator property specifies the actual character. PMDesignator - the string designator for hours that are “post meridian” (after noon). The culture’s PMDesignator property specifies the actual character. DateSeparator - the date separator. The same as \R/. The culture’s DateSeparator property specifies the actual character. TimeSeparator - the time separator. The same as \R:. The culture’s TimeSeparator property specifies the actual character. NumberDecimalSeparator - the decimal separator in numeric values. The same as \R.. The culture’s NumberDecimalSeparator property specifies the actual character. CurrencyDecimalSeparator - the decimal separator in currency values. The culture’s CurrencyDecimalSeparator property specifies the actual character. CurrencySymbol - the currency symbol. The culture’s CurrencySymbol property specifies the actual character. NumberPattern - any numeric value in the culture’s number format. The culture’s NumberFormat property allows you to access number pattern settings. CurrencyPattern - any currency value in the culture’s currency format (without the currency symbol). The culture’s NumberFormat property allows you to access currency pattern settings.	\R{MonthNames} Matches: January, February, … December
\AnyOtherCharacter	Inserts the specified character (ordinary or special) into an editor.	The \* mask inserts the * character as a literal. The \\ mask inserts the \ symbol as a literal, and so on.

Quantifiers

Quantifiers follow a metacharacter and specify how many times the character should be repeated. The table below lists the available qualifiers.

Quantifier	Description	Sample
*	Zero or more matches. The same as {0,}.	[a-zA-Z]* Matches: “” (empty string), a, aB, stringOfCharacters and so on \w* Matches: “” (empty string), a, aB123, stringOfCharsAndDigits1 and so on
+	One or more matches. The same as {1,}.	[a-zA-Z]+ Matches: a, aB, stringOfCharacters and so on \w+ Matches: a, aB123, stringOfCharsAndDigits1 and so on
?	Zero or one matches. The same as {0,1}.	[a-zA-Z]? Matches: “” (empty string), a, A, b, and so on \w? Matches: “” (empty string), a, A, 1, b, and so on
{n}	Exactly n matches.	[0-9]{2} Matches: 00, 01, … 99
{n,}	At least n matches.	[0-9]{2,} Matches: 00, 001, 99, 123, 123456, 123456789 and so on
{n,m}	At least n, but not more than m matches.	[0-9]{2,7} Matches: 00, 001, 99, 123, 123456, … 9999999

Special characters

Special characters allow you to group expression parts and specify alternatives. The table below lists the available special characters.

Character	Description	Sample
|	Multiple alternate expressions	1|2|3 Matches: 1, 2, or 3 abc|123 Matches: abc, or 123 \d{2}|\p{L}{2} Matches: two digits (00, 01, … 99) or two letters (aa, aB, and so on)
(, )	Groups several characters into a single unit	(an|ba)t Matches: ant or bat (net)+ Matches: net, netnet, netnetnet, and so on net+ Matches: net, nett, nettt, and so on (0|1)+ Matches: a string of indeterminate length consisting of 0 or 1: 01, 0101111010010, and so on

Precedence

The order of precedence is as follows:

1. Escaped Characters: \. Sets: [].
2. Grouping: ().
3. Quantifiers: *, +, ?, {}.
4. Concatenation.
5. Alternation: |.

Placeholders

Use the Placeholder property to specify an input prompt character. The default value is an underscore (_).

<DxMaskedInput @bind-Value="Value"
               Mask="[A-Z]{3}-[0-9]{2}"
               MaskMode="@MaskMode.RegEx">
    <DxRegExMaskProperties Placeholder="Placeholder" />
</DxMaskedInput>

@code{
    String Value { get; set; }
    char Placeholder = '#';
}

To hide placeholders, set the PlaceholdersVisible to false.

Literal Characters

Literal characters are arbitrary read-only characters in the edit box. If you add a character that is not a meta or special character to a mask expression, the character is displayed in the edit box as is. To display a meta or special character as a literal, precede it with a backslash.

Literals are inserted as is into the edit box in their positions defined by the mask (Enter the code: in the example below). A user has no need to enter literal characters (the cursor skips over them).

<DxMaskedInput @bind-Value="Value"
               Mask="Enter the code: [0-9]{3}-[0-9]{3}"
               MaskMode="@MaskMode.RegEx">
</DxMaskedInput>

@code{
    String Value { get; set; }
}

Literal characters are saved to the Masked Input’s Value.

Autocomplete Modes

Use the MaskAutoCompleteMode property to enable automatic value completion. If enabled, the editor tries to complete a value that has been partially entered by a user. The following autocomplete modes are supported:

Autocomplete mode	Description
Strong (default)	Each time a user types a character, the editor determines if the following placeholder can be filled. If only a specific character can be inserted in this position, the editor displays this character, and moves the caret to the right of this character. For example, if the mask is \R{MonthNames} (the editor accepts month names only) and a user types M, the second placeholder is filled with the a character, since there are two months that start with M (March and May) and both contain an a in the second position. If a user adds r to the editor’s value, the component completes the input and displays March:
Optimistic	When a user enters a character in the empty edit box for the first time, the editor fills all the following placeholders with the default values. 0 is the default character for placeholders that accept only numeric values. For placeholders that accept letters, a is the default character. For example, if the mask is set to \R{MonthNames} (the editor accepts month names only) and a user types M, the editor completes the value and sets it to May (which is the shorter of the two options - March and May). The y character becomes selected so that a user can easily change it: Another example is when the mask is set to \d{3}-\d{2}-\d{2} (a telephone number pattern) and a user enters a character (for instance, 1) in the empty edit box. The editor fills the following placeholders with the default values (the 0 characters) and selects them:
None	The autocomplete feature is disabled. A user must type each character into the edit box.

User Scenarios

Email Address

<DxMaskedInput @bind-Value="Value"
               Mask="@RegExEmailMask"
               MaskMode="@MaskMode.RegEx">
</DxMaskedInput>

@code{
    String Value { get; set; }
    String RegExEmailMask { get; set; } = @"(\w|[.-])+@(\w|-)+\.(\w|-){2,4}";
}

The (\w|[.-])+@(\w|-)+\.(\w|-){2,4} mask allows users to enter email addresses.

IP Address

<DxMaskedInput @bind-Value="Value"
               Mask="@(RegExIP + "\\." + RegExIP +"\\." + RegExIP + "\\."+ RegExIP)"
               MaskMode="@MaskMode.RegEx">
</DxMaskedInput>

@code{
    String Value { get; set; }
    String RegExIP = "([0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])";
}

The specified mask allows users to enter IP addresses.

Uppercase String

<DxMaskedInput @bind-Value="Value"
               Mask="[A-Z]*"
               MaskMode="@MaskMode.RegEx" >
</DxMaskedInput>

@code{
    String Value { get; set; }
}

The [A-Z]* mask allows users to enter uppercase strings only. If a lowercase letter is typed, the component transforms it to the corresponding uppercase character.

String of a Limited Length

<DxMaskedInput @bind-Value="Value"
               Mask="Enter a password \(at least 6 symbols\): .{6,}"
               MaskMode="@MaskMode.RegEx">
</DxMaskedInput>

@code{
    String Value { get; set; }
}

The .{6,} mask allows users to enter strings of 6 or more characters.

Hexadecimal Value

<DxMaskedInput @bind-Value="Value"
               Mask="[0-9A-F]*"
               MaskMode="@MaskMode.RegEx">
</DxMaskedInput>

@code{
    String Value { get; set; }
}

The [0-9A-F]* mask allows users to enter hexadecimal values of any length.

Numbers in the Specified Range

<DxMaskedInput @bind-Value="Value"
               Mask="(1?[1-9])|([12][0-4])"
               MaskMode="@MaskMode.RegEx">
</DxMaskedInput>

@code{
    int Value { get; set; }
}

The (1?[1-9])|([12][0-4]) mask allows users to only enter numbers in the range of 1-24.

This mask consists of two parts: (1?[1-9]) and ([12][0-4]), separated by the alternation symbol. The first part matches numbers in the ranges of 1-9 and 11-19. The second part matches numbers in the ranges of 10-14 and 20-24.