CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vuelidate

Simple, lightweight model-based validation library for Vue.js applications

Pending
Overview
Eval results
Files

validators.mddocs/

Built-in Validators

Comprehensive collection of pre-built validation functions covering common validation scenarios including strings, numbers, conditionals, and network formats.

Capabilities

Basic Required Validation

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
}

String Format Validators

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

Numeric Validators

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

Length Validators

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

Value Range Validators

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

Conditional Validators

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

Network Format Validators

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
}

Logic Composition Validators

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

Validator Behavior

Empty Value Handling

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

Type Coercion

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 count

Install with Tessl CLI

npx tessl i tessl/npm-vuelidate

docs

collections.md

custom-validators.md

index.md

integration.md

validation-state.md

validators.md

tile.json