or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

conditional-validators.mdcore-validators.mdformat-validators.mdhelpers-utilities.mdindex.mdinternationalization.mdlogical-operators.md
tile.json

tessl/npm-vuelidate--validators

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vuelidate/validators@2.0.x

To install, run

npx @tessl/cli install tessl/npm-vuelidate--validators@2.0.0

index.mddocs/

@vuelidate/validators

@vuelidate/validators is a comprehensive collection of validation functions designed for Vue.js applications using the Vuelidate validation library. It provides common validators like required, email, minLength, maxLength, numeric, and more with built-in error messages and customization options. The library supports both Vue 2.x and Vue 3.x through vue-demi, making it highly reusable across different Vue.js project versions.

Package Information

  • Package Name: @vuelidate/validators
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @vuelidate/validators

Core Imports

import { required, email, minLength, helpers } from "@vuelidate/validators";

For CommonJS:

const { required, email, minLength, helpers } = require("@vuelidate/validators");

Raw validators without built-in messages:

import { required, email, minLength } from "@vuelidate/validators/raw";

Basic Usage

import { required, email, minLength, maxLength, sameAs } from "@vuelidate/validators";
import { computed } from "vue";

// Define validation rules for a form
const formData = { password: "" };

const validationRules = {
  username: { required, minLength: minLength(3) },
  email: { required, email },
  password: { required, minLength: minLength(8) },
  confirmPassword: { 
    required, 
    sameAsPassword: sameAs(computed(() => formData.password))
  }
};

// The validators are validation objects with $validator, $message, and $params
const emailValidator = email;
const lengthValidator = minLength(5);

Architecture

@vuelidate/validators is built around several key components:

  • Core Validators: Fundamental validation functions (required, email, length constraints, etc.)
  • Format Validators: Specialized validators for specific formats (email, URL, IP address, MAC address)
  • Logical Operators: Combinators for complex validation logic (and, or, not)
  • Helper Functions: Utilities for customizing validators (withMessage, withParams, withAsync)
  • Internationalization: Support for translatable error messages via createI18nMessage
  • Vue Integration: Reactive parameter support using Vue refs for dynamic validation

Capabilities

Core Validators

Essential validation functions for common form validation scenarios including required fields, string/numeric format validation, and length constraints.

// Required field validation
const required: ValidationRuleWithoutParams;

// String format validators
const alpha: ValidationRuleWithoutParams;
const alphaNum: ValidationRuleWithoutParams;
const numeric: ValidationRuleWithoutParams;
const decimal: ValidationRuleWithoutParams;
const integer: ValidationRuleWithoutParams;

// Length and value constraints
function minLength(min: number | Ref<number>): ValidationRuleWithParams<{ min: number }>;
function maxLength(max: number | Ref<number>): ValidationRuleWithParams<{ max: number }>;
function minValue(min: number | Ref<number> | string | Ref<string>): ValidationRuleWithParams<{ min: number }>;
function maxValue(max: number | Ref<number> | string | Ref<string>): ValidationRuleWithParams<{ max: number }>;
function between(min: number | Ref<number>, max: number | Ref<number>): ValidationRuleWithParams<{ min: number, max: number }>;

Core Validators

Format Validators

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

// Network and format validators
const email: ValidationRuleWithoutParams;
const url: ValidationRuleWithoutParams;
const ipAddress: ValidationRuleWithoutParams;
function macAddress(separator: string | Ref<string>): ValidationRuleWithoutParams;

Format Validators

Conditional and Comparison Validators

Validators for conditional validation logic and value comparison operations.

// Conditional validators
function requiredIf(prop: boolean | Ref<boolean> | string | (() => boolean | Promise<boolean>)): ValidationRuleWithoutParams;
function requiredUnless(prop: boolean | Ref<boolean> | string | (() => boolean | Promise<boolean>)): ValidationRuleWithoutParams;

// Comparison validator
function sameAs<E = unknown>(equalTo: E | Ref<E>, otherName?: string): ValidationRuleWithParams<{ equalTo: E, otherName: string }>;

Conditional and Comparison Validators

Logical Operators

Combinators for creating complex validation logic by combining multiple validators with logical operations.

// Logical combinators
function and<T = unknown>(...validators: ValidationRule<T>[]): ValidationRuleWithoutParams;
function or<T = unknown>(...validators: ValidationRule<T>[]): ValidationRuleWithoutParams;
function not<T = unknown>(validator: ValidationRule<T>): ValidationRuleWithoutParams;

Logical Operators

Helper Functions and Utilities

Utility functions for customizing validators with parameters, messages, async behavior, and array validation.

const helpers: {
  withParams: <T = unknown>(params: object, validator: ValidationRule<T>) => ValidationRuleWithParams;
  withMessage: <T = unknown>(message: string | ((params: MessageProps) => string), validator: ValidationRule<T>) => ValidationRuleWithParams;
  withAsync: Function;
  forEach: (validators: ValidationArgs) => { $validator: ValidationRule, $message: () => string };
  req: (value: any) => boolean;
  len: (value: any) => number;
  regex: (...expr: RegExp[]) => (value: any) => boolean;
  unwrap: (value: any) => any;
  unwrapNormalizedValidator: Function;
  unwrapValidatorResponse: Function;
  normalizeValidatorObject: Function;
};

Helper Functions and Utilities

Internationalization

Internationalization support for creating translatable validation error messages.

// I18n message creation
function createI18nMessage({ 
  t, 
  messagePath?, 
  messageParams? 
}: {
  t: typeof TranslationFunction;
  messagePath?: typeof messagePathFactory;
  messageParams?: typeof messageParamsFactory;
}): typeof withI18nMessage;

// Translation function type
export function TranslationFunction(
  path: string, 
  params: { model: string, property: string, [key: string]: any }
): string;

// Helper factory functions  
export function messagePathFactory(params: MessageProps): string;
export function messageParamsFactory(params: MessageParams): MessageParams;

Internationalization

Types

// Core validation types (imported from @vuelidate/core)
type ValidationRuleWithoutParams = () => boolean;
type ValidationRuleWithParams<T = object> = { 
  $validator: Function, 
  $params: T, 
  $message?: string | Function 
};
type ValidationRule<T = unknown> = ValidationRuleWithoutParams | ValidationRuleWithParams | Function;
type ValidatorWrapper = (...args: any[]) => ValidationRule;

// Message-related types
interface MessageProps {
  $model: string;
  $property: string;
  $params: { [attr: string]: any };
  $validator: string;
  $pending: boolean;
  $invalid: boolean;
  $response: unknown;
  $propertyPath: string;
}

interface MessageParams {
  model: unknown;
  property: string;
  invalid: boolean;
  pending: boolean;
  propertyPath: string;
  response: unknown;
  validator: string;
  [key: string]: any;
}