Comprehensive validation library for Vue.js applications providing common validators with built-in error messages and customization options
87
Specialized validators for validating specific data formats such as email addresses, URLs, and network addresses.
Validates that a string is a properly formatted email address.
/**
* Validates that string is a properly formatted email address
* Uses RFC 5322 compliant email validation pattern
* @returns ValidationRuleWithoutParams that returns true if string is valid email
*/
const email: ValidationRuleWithoutParams;Usage Examples:
import { email, required } from "@vuelidate/validators";
// In validation rules (most common usage)
const validationRules = {
userEmail: { required, email }
};
// Direct validator function usage for testing
const emailValidator = email;
const validEmail1 = emailValidator.$validator("user@example.com"); // true
const validEmail2 = emailValidator.$validator("john.doe+tag@company.co.uk"); // true
const validEmail3 = emailValidator.$validator("test123@subdomain.domain.org"); // true
const invalidEmail1 = emailValidator.$validator("invalid-email"); // false
const invalidEmail2 = emailValidator.$validator("@example.com"); // false
const invalidEmail3 = emailValidator.$validator("user@"); // falseValidates that a string is a properly formatted URL.
/**
* Validates that string is a properly formatted URL
* Accepts http, https, ftp protocols and validates URL structure
* @returns ValidationRuleWithoutParams that returns true if string is valid URL
*/
const url: ValidationRuleWithoutParams;Usage Examples:
import { url } from "@vuelidate/validators";
// In validation rules (most common usage)
const validationRules = {
website: { url }
};
// Direct validator function usage for testing
const urlValidator = url;
const validUrl1 = urlValidator.$validator("https://example.com"); // true
const validUrl2 = urlValidator.$validator("http://subdomain.example.com/path"); // true
const validUrl3 = urlValidator.$validator("ftp://files.example.com"); // true
const invalidUrl1 = urlValidator.$validator("not-a-url"); // false
const invalidUrl2 = urlValidator.$validator("example.com"); // false (missing protocol)
const invalidUrl3 = urlValidator.$validator("https://"); // false (incomplete)Validates that a string is a properly formatted IP address (IPv4 or IPv6).
/**
* Validates that string is a properly formatted IP address
* Supports both IPv4 and IPv6 address formats
* @returns ValidationRuleWithoutParams that returns true if string is valid IP address
*/
const ipAddress: ValidationRuleWithoutParams;Usage Examples:
import { ipAddress, required } from "@vuelidate/validators";
// In validation rules (most common usage)
const validationRules = {
serverIP: { required, ipAddress }
};
// Direct validator function usage for testing
const ipValidator = ipAddress;
// Valid IPv4 addresses
const validIPv4_1 = ipValidator.$validator("192.168.1.1"); // true
const validIPv4_2 = ipValidator.$validator("10.0.0.1"); // true
const validIPv4_3 = ipValidator.$validator("127.0.0.1"); // true
// Valid IPv6 addresses
const validIPv6_1 = ipValidator.$validator("2001:0db8:85a3:0000:0000:8a2e:0370:7334"); // true
const validIPv6_2 = ipValidator.$validator("::1"); // true (localhost)
const validIPv6_3 = ipValidator.$validator("fe80::1"); // true
// Invalid IP addresses
const invalidIP1 = ipValidator.$validator("256.256.256.256"); // false (IPv4 out of range)
const invalidIP2 = ipValidator.$validator("192.168.1"); // false (incomplete IPv4)
const invalidIP3 = ipValidator.$validator("not-an-ip"); // falseValidates that a string is a properly formatted MAC address with a customizable separator.
/**
* Validates that string is a properly formatted MAC address
* @param separator - Character used to separate MAC address octets (e.g., ":", "-")
* @returns ValidationRuleWithoutParams that returns true if string is valid MAC address
*/
function macAddress(separator: string | Ref<string>): ValidationRuleWithoutParams;Usage Examples:
import { macAddress } from "@vuelidate/validators";
import { ref } from "vue";
// MAC address with colon separator
const colonMAC = macAddress(":");
const validColon1 = colonMAC("00:1B:44:11:3A:B7"); // true
const validColon2 = colonMAC("AA:BB:CC:DD:EE:FF"); // true
// MAC address with dash separator
const dashMAC = macAddress("-");
const validDash1 = dashMAC("00-1B-44-11-3A-B7"); // true
const validDash2 = dashMAC("aa-bb-cc-dd-ee-ff"); // true (case insensitive)
// Invalid MAC addresses
const invalidMAC1 = colonMAC("00:1B:44:11:3A"); // false (too short)
const invalidMAC2 = colonMAC("00:1B:44:11:3A:G7"); // false (invalid hex)
const invalidMAC3 = dashMAC("00:1B:44:11:3A:B7"); // false (wrong separator)
// Reactive separator
const separatorRef = ref(":");
const dynamicMAC = macAddress(separatorRef);
// Change separator reactively
separatorRef.value = "-";
// In validation rules
const validationRules = {
deviceMAC: { required, macAddress: macAddress(":") }
};Format validators can be combined with other validators for comprehensive validation:
import { required, email, url, minLength } from "@vuelidate/validators";
const contactFormRules = {
email: {
required,
email,
minLength: minLength(5)
},
website: {
url
}, // Optional field - only validates format if provided
description: {
required,
minLength: minLength(10)
}
};import { required, ipAddress, macAddress, between } from "@vuelidate/validators";
const networkConfigRules = {
serverIP: { required, ipAddress },
gatewayIP: { required, ipAddress },
deviceMAC: { required, macAddress: macAddress(":") },
port: { required, between: between(1, 65535) }
};Install with Tessl CLI
npx tessl i tessl/npm-vuelidate--validatorsdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10