vue3-validate-directive/README.md

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

# 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

```bash
npm install vue3-validate-directive
```

## Usage

### Setup

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

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

### Validation Types

#### 1. Function Validation

```vue
<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

```vue
<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

```vue
<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

```vue
<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

```vue
<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

```vue
<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

```vue
<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

```vue
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

```javascript
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.