tessl/npm-vuelidate

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Vuelidate

Name: tessl/npm-vuelidate
Author: tessl

Vuelidate is a lightweight, model-based validation library specifically designed for Vue.js 2.0 applications. It provides a decoupled architecture that separates validation logic from templates, supporting both simple field validation and complex scenarios including collection validations and nested model structures.

Package Information

Package Name: vuelidate
Package Type: npm
Language: JavaScript
Installation: npm install vuelidate --save

Core Imports

Plugin installation (global validation support):

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Mixin approach (component-level):

import { validationMixin } from 'vuelidate'

Validators and utilities:

import { required, email, minLength } from 'vuelidate/lib/validators'
import { withParams } from 'vuelidate'

Basic Usage

import { validationMixin } from 'vuelidate'
import { required, email, minLength } from 'vuelidate/lib/validators'

export default {
  mixins: [validationMixin],
  data() {
    return {
      name: '',
      email: '',
      password: ''
    }
  },
  validations: {
    name: { required },
    email: { required, email },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    submitForm() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // Form is valid, submit data
        console.log('Form submitted:', {
          name: this.name,
          email: this.email,
          password: this.password
        })
      }
    }
  }
}

Architecture

Vuelidate is built around several key components:

Plugin System: Global Vue plugin (Vuelidate) or component-level mixin (validationMixin)
Validation Rules: Function-based validators that return boolean or Promise<boolean>
Validation State: Reactive validation objects with state properties ($invalid, $dirty, $error, etc.)
Parameter System: withParams for adding metadata to custom validators
Collection Support: Built-in support for array and nested object validation via $each

Capabilities

Plugin and Mixin Integration

Core integration methods for adding validation functionality to Vue components, supporting both global and component-level approaches.

function Vuelidate(Vue: VueConstructor): void;

const validationMixin: {
  data(): {};
  beforeCreate(): void;
  beforeDestroy(): void;
};

Integration

Built-in Validators

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

// String validators
function required(value: any): boolean;
function alpha(value: any): boolean;  
function alphaNum(value: any): boolean;
function email(value: any): boolean;
function url(value: any): boolean;

// Numeric validators  
function numeric(value: any): boolean;
function integer(value: any): boolean;
function decimal(value: any): boolean;

// Length validators
function minLength(length: number): (value: any) => boolean;
function maxLength(length: number): (value: any) => boolean;

// Value range validators
function minValue(min: number): (value: any) => boolean;
function maxValue(max: number): (value: any) => boolean;
function between(min: number, max: number): (value: any) => boolean;

Built-in Validators

Custom Validators and Parameters

System for creating custom validation functions with parameter metadata support, enabling reusable and configurable validation logic.

function withParams(
  params: object,
  validator: (...args: any[]) => boolean | Promise<boolean>
): (...args: any[]) => boolean | Promise<boolean>;

function withParams(
  closure: (addParams: (params: object) => void) => (...args: any[]) => boolean | Promise<boolean>
): (...args: any[]) => boolean | Promise<boolean>;

// Helper utilities (available via helpers export)
const helpers: {
  req: (value: any) => boolean;
  len: (value: any) => number;
  ref: (reference: string | Function, vm: any, parentVm: any) => any;
  regex: (type: string, expr: RegExp) => (value: any) => boolean;
};

Custom Validators

Validation State and Control

Complete validation state management with reactive properties and control methods for tracking field state, errors, and programmatic validation control.

interface ValidationState {
  // State properties
  readonly $invalid: boolean;
  readonly $valid: boolean;
  readonly $pending: boolean;
  readonly $dirty: boolean;
  readonly $anyDirty: boolean; 
  readonly $error: boolean;
  readonly $anyError: boolean;
  readonly $params: object | null;
  
  // Control methods
  $touch(): void;
  $reset(): void;
  
  // Model access
  $model: any;
}

Validation State

Collection and Nested Validation

Advanced validation features for arrays, nested objects, and dynamic collections with support for tracking, conditional validation, and complex data structures.

// Collection validation with $each
interface CollectionValidation {
  $each: {
    [validationKey: string]: ValidationRule;
    $trackBy?: string | ((item: any) => string);
  };
}

// Group validation for references
interface GroupValidation {
  [groupKey: string]: string[] | string;
}

Collections and Nesting