Vue3 Validate Directive

A flexible Vue 3 directive for form validation with support for sync/async functions, RegExp patterns, and string patterns.

Features

• ✅ Multiple validation types: Functions, RegExp, strings
• ✅ Async validation support: Promise-based validation
• ✅ Checkbox/Radio support: .checked modifier for checkbox and radio button validation
• ✅ Real-time validation: Validates on input and programmatic changes
• ✅ HTML5 integration: Uses native setCustomValidity() and reportValidity()
• ✅ Memory leak prevention: Proper cleanup on component unmount
• ✅ TypeScript support: Full type definitions included

Installation

npm install vue3-validate-directive

Usage

Setup

import { createApp } from 'vue'
import VueValidateDirective from 'vue3-validate-directive'

const app = createApp({})
app.use(VueValidateDirective)

Validation Types

1. Function Validation

<template>
  <!-- Sync function -->
  <input v-validate="{ f: (value) => value.length >= 8, msg: 'Password must be at least 8 characters' }" />
  
  <!-- Async function -->
  <input v-validate="{ f: async (value) => await checkUsername(value), msg: 'Username is already taken' }" />
</template>

2. RegExp Validation

<template>
  <!-- Direct RegExp -->
  <input v-validate="{ f: /^[a-zA-Z0-9]+$/ }" />
  
  <!-- RegExp with custom message -->
  <input v-validate="{ f: /^[a-zA-Z0-9]+$/, msg: 'Only alphanumeric characters allowed' }" />
</template>

3. String Pattern Validation

<template>
  <!-- String pattern (converted to RegExp) -->
  <input v-validate="{ f: '^[a-zA-Z0-9]+$' }" />
  
  <!-- String with custom message -->
  <input v-validate="{ f: '^[a-zA-Z0-9]+$', msg: 'Only alphanumeric characters allowed' }" />
</template>

4. Checkbox Validation

<template>
  <!-- Validate checkbox checked state -->
  <input type="checkbox" v-validate.checked="{ f: (checked) => checked, msg: 'You must accept the terms' }" />
</template>

Advanced Examples

Cross-field Validation

<template>
  <input 
    v-model="password" 
    v-validate="{ f: (value) => value.length >= 8, msg: 'Password must be at least 8 characters' }" 
  />
  <input 
    v-model="confirmPassword" 
    v-validate="{ f: (value) => value === password, msg: 'Passwords must match' }" 
  />
</template>

Async Server Validation

<template>
  <input 
    v-validate="{ 
      f: async (value) => {
        const response = await fetch(`/api/check-username?username=${value}`)
        const data = await response.json()
        return data.available
      }, 
      msg: 'Username is already taken' 
    }" 
  />
</template>

Complex Business Logic

<template>
  <input 
    v-validate="{ 
      f: (value) => {
        // Complex validation logic
        if (value.length < 8) return false
        if (!/[A-Z]/.test(value)) return false
        if (!/[a-z]/.test(value)) return false
        if (!/[0-9]/.test(value)) return false
        if (!/[!@#$%^&amp;*]/.test(value)) return false
        return true
      }, 
      msg: 'Password must contain uppercase, lowercase, number, and special character' 
    }" 
  />
</template>

API Reference

Directive Syntax

v-validate[.checked]="validationConfig"

Validation Config

| Property | Type | Description | |----------|------|-------------| | f | Function \| RegExp \| string | Validation function, RegExp, or string pattern | | msg | string | Custom error message (optional) |

Modifiers

| Modifier | Description | |----------|-------------| | .checked | Validates the element's checked property instead of value (for checkboxes and radio buttons) |

Plugin Options

app.use(VueValidateDirective, {
  defaultMessage: 'Invalid value' // Default error message
})

Browser Support

• Modern browsers with ES6+ support
• Vue 3.0+

License

MIT - Feel free to use, modify, and distribute as needed.