Simple, lightweight model-based validation library for Vue.js applications
—
Comprehensive collection of pre-built validation functions covering common validation scenarios including strings, numbers, conditionals, and network formats.
Core required validation that handles various data types appropriately.
/**
* Validates that a value is present and not empty
* - Arrays: must have length > 0
* - Strings: must have length > 0 after trimming
* - Objects: must have at least one enumerable property
* - Dates: must be valid date objects
* - Other values: must be truthy (except false, which is valid)
*/
function required(value: any): boolean;Usage:
import { required } from 'vuelidate/lib/validators'
validations: {
name: { required },
terms: { required } // for checkboxes - false fails, true passes
}Validators for common string format requirements.
/**
* Validates alphabetic characters only (a-z, A-Z)
*/
function alpha(value: any): boolean;
/**
* Validates alphanumeric characters only (a-z, A-Z, 0-9)
*/
function alphaNum(value: any): boolean;
/**
* Validates email format using comprehensive regex
*/
function email(value: any): boolean;
/**
* Validates URL format
*/
function url(value: any): boolean;Usage:
import { alpha, alphaNum, email, url } from 'vuelidate/lib/validators'
validations: {
firstName: { alpha },
username: { alphaNum },
email: { email },
website: { url }
}Validators for numeric values and constraints.
/**
* Validates numeric values (including numeric strings)
*/
function numeric(value: any): boolean;
/**
* Validates integer values
*/
function integer(value: any): boolean;
/**
* Validates decimal numbers
*/
function decimal(value: any): boolean;Usage:
import { numeric, integer, decimal } from 'vuelidate/lib/validators'
validations: {
age: { numeric, integer },
price: { numeric, decimal },
quantity: { integer }
}Validators for length constraints on strings, arrays, and objects.
/**
* Validates minimum length
* @param length - Minimum required length
*/
function minLength(length: number): (value: any) => boolean;
/**
* Validates maximum length
* @param length - Maximum allowed length
*/
function maxLength(length: number): (value: any) => boolean;Usage:
import { minLength, maxLength } from 'vuelidate/lib/validators'
validations: {
password: {
minLength: minLength(8),
maxLength: maxLength(50)
},
tags: {
minLength: minLength(1), // at least one tag
maxLength: maxLength(5) // max 5 tags
}
}Validators for numeric value ranges and comparisons.
/**
* Validates minimum numeric value
* @param min - Minimum allowed value
*/
function minValue(min: number): (value: any) => boolean;
/**
* Validates maximum numeric value
* @param max - Maximum allowed value
*/
function maxValue(max: number): (value: any) => boolean;
/**
* Validates value is between min and max (inclusive)
* @param min - Minimum allowed value
* @param max - Maximum allowed value
*/
function between(min: number, max: number): (value: any) => boolean;Usage:
import { minValue, maxValue, between } from 'vuelidate/lib/validators'
validations: {
age: {
minValue: minValue(0),
maxValue: maxValue(120)
},
rating: {
between: between(1, 5)
}
}Validators that depend on other fields or conditions.
/**
* Required only if referenced property is truthy
* @param prop - Property name or function to check
*/
function requiredIf(prop: string | Function): (value: any, parentVm?: any) => boolean;
/**
* Required unless referenced property is truthy
* @param prop - Property name or function to check
*/
function requiredUnless(prop: string | Function): (value: any, parentVm?: any) => boolean;
/**
* Validates value matches another property
* @param equalTo - Property name or function to compare against
*/
function sameAs(equalTo: string | Function): (value: any, parentVm?: any) => boolean;Usage:
import { requiredIf, requiredUnless, sameAs } from 'vuelidate/lib/validators'
validations: {
email: { required },
phone: {
requiredUnless: requiredUnless('email') // phone required unless email provided
},
password: { required, minLength: minLength(6) },
confirmPassword: {
requiredIf: requiredIf('password'),
sameAsPassword: sameAs('password')
},
companyName: {
requiredIf: requiredIf(function() {
return this.accountType === 'business'
})
}
}Validators for network addresses and identifiers.
/**
* Validates IPv4 address format (e.g., "192.168.1.1")
* Does not validate IPv6 addresses
*/
function ipAddress(value: any): boolean;
/**
* Validates MAC address format with optional separator
* @param separator - Character separator between hex pairs (default: ':')
*/
function macAddress(separator?: string): (value: any) => boolean;Usage:
import { ipAddress, macAddress } from 'vuelidate/lib/validators'
validations: {
serverIp: { ipAddress },
deviceMac: { macAddress }, // default ':' separator
deviceMacDash: { macAddress: macAddress('-') }, // custom separator
deviceMacNone: { macAddress: macAddress('') } // no separator
}Validators for combining multiple validation rules with logical operations.
/**
* Logical AND - all validators must pass
* @param validators - Variable number of validator functions
*/
function and(...validators: Function[]): (value: any, parentVm?: any) => boolean;
/**
* Logical OR - at least one validator must pass
* @param validators - Variable number of validator functions
*/
function or(...validators: Function[]): (value: any, parentVm?: any) => boolean;
/**
* Logical NOT - inverts the result of a validator
* @param validator - Validator function to negate
*/
function not(validator: Function): (value: any, parentVm?: any) => boolean;Usage:
import { and, or, not, alpha, numeric, minLength } from 'vuelidate/lib/validators'
validations: {
code: {
// Must be either alphabetic OR numeric, AND at least 3 characters
validCode: and(
or(alpha, numeric),
minLength(3)
)
},
username: {
// Must NOT be a numeric-only string
notNumericOnly: not(numeric)
}
}Most validators (except required) allow empty values to pass validation:
// These will all pass validation for empty strings
const result1 = email('') // true - empty values allowed
const result2 = minLength(5)('') // true - empty values allowed
const result3 = required('') // false - required specifically checks for non-empty
// Combine with required for mandatory fields
validations: {
email: {
required, // Must be present
email // Must be valid email format when present
}
}Validators handle type coercion appropriately for their context:
// Numeric validators accept numeric strings
numeric('123') // true
integer('123') // true
minValue(10)('15') // true
// Length validators work on strings, arrays, and objects
minLength(3)('hello') // true - string length
minLength(2)([1, 2, 3]) // true - array length
minLength(1)({ a: 1, b: 2 }) // true - object property countInstall with Tessl CLI
npx tessl i tessl/npm-vuelidate