CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vuelidate--validators

Comprehensive validation library for Vue.js applications providing common validators with built-in error messages and customization options

87

1.14x
Overview
Eval results
Files

format-validators.mddocs/

Format Validators

Specialized validators for validating specific data formats such as email addresses, URLs, and network addresses.

Capabilities

Email Validator

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@"); // false

URL Validator

Validates 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)

IP Address Validator

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"); // false

MAC Address Validator

Validates 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(":") }
};

Common Usage Patterns

Combining Format Validators

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)
  }
};

Network Configuration Validation

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--validators

docs

conditional-validators.md

core-validators.md

format-validators.md

helpers-utilities.md

index.md

internationalization.md

logical-operators.md

tile.json