uri validator

Validate an URL address

Options

Using with form field
The HTML attributes are used to set the validator options via the Declarative plugin
NameHTML attributeTypeDescription
allowLocaldata-fv-uri___allow-localBooleanAllow the private and local network IP. It is false, by default
messagedata-fv-uri___messageStringThe error message
protocoldata-fv-uri___protocolStringThe protocols, separated by a comma. By default, it is set to http, https, ftp
allowEmptyProtocoldata-fv-uri___allow-empty-protocolBooleanAllow the URI without protocol. Default to false
Using the ES6 module
// You might need to change the importing path
import { uri } from '/vendors/@form-validation/cjs/validator-uri';
const result = uri().validate({
value: ...,
options: {
allowLocal: ...,
message: ...,
protocol: ...,
allowEmptyProtocol: ...,
},
});
/*
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-uri
  • Use the uri validator:
import { uri } from '@form-validation/validator-uri';
const result = uri().validate({
value: ...,
options: {
allowLocal: ...,
message: ...,
protocol: ...,
allowEmptyProtocol: ...,
},
});

Basic example

Basic example

HTML5 Example

When the Declarative plugin is used, the uri validator will be turned on automatically if the input uses HTML 5 type="url" attribute.
HTML5 example

NPM package example

The following snippet shows how to use the uri validator with the npm package:
import { uri } from '@form-validation/validator-uri';
const res1 = uri().validate({
value: 'http://foo.com/blah_blah_(wikipedia)',
options: {
message: 'The input is not a valid URL',
},
});
// res1.valid === true
const res2 = uri().validate({
value: 'http://foo.bar?q=Spaces should be encoded',
options: {
allowLocal: true,
message: 'The input is not a valid URL',
},
});
// res2.valid === false
const res3 = uri().validate({
value: 'news://foo.com/blah_blah',
options: {
allowEmptyProtocol: true,
message: 'The input is not a valid URL',
},
});
// res3.valid === true

See also

Changelog

v2.1.0
  • The validator doesn't work properly if the message property isn't defined
v2.0.0
  • Add the npm package