regexp validator

Check if the value matches given JavaScript regular expression

Options

Using with form field
The HTML attributes are used to set the validator options via the Declarative plugin
NameHTML attributeTypeDescription
flagsdata-fv-regexp___flagsStringIf specified, flags can have any combination of JavaScript regular expression flags such as g (global match), i (ignore case), m (multiple line)
messagedata-fv-regexp___messageStringThe error message
regexp *data-fv-regexp___regexp or patternString or RegExpThe JavaScript regular expression
Look at the Alias plugin if you want to have multiple regular expressions on the same field
Using the ES6 module
// You might need to change the importing path
import { regexp } from '/vendors/@form-validation/cjs/validator-regexp';
const result = regexp().validate({
value: ...,
options: {
flags: ...,
message: ...,
regexp: ...,
},
});
/*
result is an object of
{
valid: true or false,
message: The error message
}
*/
Using the npm package
  • Install the validator package:
$ npm install @form-validation/validator-regexp
  • Use the regexp validator:
import { regexp } from '@form-validation/validator-regexp';
const result = regexp().validate({
value: ...,
options: {
flags: ...,
message: ...,
regexp: ...,
},
});
Use a correct pattern
If the validator still pass when the field value doesn't match the pattern, please ensure you use a correct pattern. Here are some check lists:
  1. Is the pattern wrapped between ^ and $? For example, if a field must be 5 digits number, then ^\d{5} (no $ at the end) is wrong pattern. ^\d{5}$ is right one.
  2. Does the pattern work with external services? You can use the following services to test the regular expression:

Useful patterns

The following section introduces some useful patterns:
^(?!000|666)(?:[0-6][0-9]{2}|7(?:[0-6][0-9]|7[0-2]))-(?!00)[0-9]{2}-(?!0000)[0-9]{4}$
Traditional time in 12-hour format
// without seconds (hh:mm)
^(1[0-2]|0?[1-9]):([0-5]?[0-9])$
// with seconds (hh:mm:ss)
^(1[0-2]|0?[1-9]):([0-5]?[0-9]):([0-5]?[0-9])$
Traditional time in 24-hour format
// without seconds (hh:mm)
^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$
// with seconds (hh:mm:ss)
^(2[0-3]|[01]?[0-9]):([0-5]?[0-9]):([0-5]?[0-9])$
Numbers in a particular range
// Range of 1-12 (hour, month)
^(1[0-2]|[1-9])$
// Range of 1-24 (hour)
^(2[0-4]|1[0-9]|[1-9])$
// Range of 0-59 (minute, second)
^[1-5]?[0-9]$
// Range of 1-31 (day of month)
^(3[01]|[12][0-9]|[1-9])$
// Range of 0-100 (percentage)
^(100|[1-9]?[0-9])$

Basic example

In the following form, user is asked to enter the full name which alphabetical characters and spaces only.
Basic example

HTML5 Example

When the Declarative plugin is used, the regexp validator will be turned on automatically if the input uses HTML 5 pattern attribute.
HTML5 Example

NPM package example

The following snippet shows how to use the regexp validator with the npm package:
import { regexp } from '@form-validation/validator-regexp';
const res1 = regexp().validate({
value: 'Ms',
options: {
regexp: /^[A-Z\s]+$/,
message: 'The input is not valid',
},
});
// res1.valid === false
const res2 = regexp().validate({
value: 'form VALIDATION',
options: {
regexp: '^[A-Z\\s]+$',
flags: 'i',
message: 'The input is not valid',
},
});
// res2.valid === true

See also

Changelog

v2.0.0
  • Add the npm package