0
# Vuelidate
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: vuelidate
7
- **Package Type**: npm  
8
- **Language**: JavaScript
9
- **Installation**: `npm install vuelidate --save`
10

11
## Core Imports
12

13
Plugin installation (global validation support):
14

15
```javascript
16
import Vue from 'vue'
17
import Vuelidate from 'vuelidate'
18
Vue.use(Vuelidate)
19
```
20

21
Mixin approach (component-level):
22

23
```javascript
24
import { validationMixin } from 'vuelidate'
25
```
26

27
Validators and utilities:
28

29
```javascript
30
import { required, email, minLength } from 'vuelidate/lib/validators'
31
import { withParams } from 'vuelidate'
32
```
33

34
## Basic Usage
35

36
```javascript
37
import { validationMixin } from 'vuelidate'
38
import { required, email, minLength } from 'vuelidate/lib/validators'
39

40
export default {
41
  mixins: [validationMixin],
42
  data() {
43
    return {
44
      name: '',
45
      email: '',
46
      password: ''
47
    }
48
  },
49
  validations: {
50
    name: { required },
51
    email: { required, email },
52
    password: { required, minLength: minLength(6) }
53
  },
54
  methods: {
55
    submitForm() {
56
      this.$v.$touch()
57
      if (!this.$v.$invalid) {
58
        // Form is valid, submit data
59
        console.log('Form submitted:', {
60
          name: this.name,
61
          email: this.email,
62
          password: this.password
63
        })
64
      }
65
    }
66
  }
67
}
68
```
69

70
## Architecture
71

72
Vuelidate is built around several key components:
73

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

80
## Capabilities
81

82
### Plugin and Mixin Integration
83

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

86
```javascript { .api }
87
function Vuelidate(Vue: VueConstructor): void;
88

89
const validationMixin: {
90
  data(): {};
91
  beforeCreate(): void;
92
  beforeDestroy(): void;
93
};
94
```
95

96
[Integration](./integration.md)
97

98
### Built-in Validators
99

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

102
```javascript { .api }
103
// String validators
104
function required(value: any): boolean;
105
function alpha(value: any): boolean;  
106
function alphaNum(value: any): boolean;
107
function email(value: any): boolean;
108
function url(value: any): boolean;
109

110
// Numeric validators  
111
function numeric(value: any): boolean;
112
function integer(value: any): boolean;
113
function decimal(value: any): boolean;
114

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

119
// Value range validators
120
function minValue(min: number): (value: any) => boolean;
121
function maxValue(max: number): (value: any) => boolean;
122
function between(min: number, max: number): (value: any) => boolean;
123
```
124

125
[Built-in Validators](./validators.md)
126

127
### Custom Validators and Parameters
128

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

131
```javascript { .api }
132
function withParams(
133
  params: object,
134
  validator: (...args: any[]) => boolean | Promise<boolean>
135
): (...args: any[]) => boolean | Promise<boolean>;
136

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

141
// Helper utilities (available via helpers export)
142
const helpers: {
143
  req: (value: any) => boolean;
144
  len: (value: any) => number;
145
  ref: (reference: string | Function, vm: any, parentVm: any) => any;
146
  regex: (type: string, expr: RegExp) => (value: any) => boolean;
147
};
148
```
149

150
[Custom Validators](./custom-validators.md)
151

152
### Validation State and Control
153

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

156
```javascript { .api }
157
interface ValidationState {
158
  // State properties
159
  readonly $invalid: boolean;
160
  readonly $valid: boolean;
161
  readonly $pending: boolean;
162
  readonly $dirty: boolean;
163
  readonly $anyDirty: boolean; 
164
  readonly $error: boolean;
165
  readonly $anyError: boolean;
166
  readonly $params: object | null;
167
  
168
  // Control methods
169
  $touch(): void;
170
  $reset(): void;
171
  
172
  // Model access
173
  $model: any;
174
}
175
```
176

177
[Validation State](./validation-state.md)
178

179
### Collection and Nested Validation
180

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

183
```javascript { .api }
184
// Collection validation with $each
185
interface CollectionValidation {
186
  $each: {
187
    [validationKey: string]: ValidationRule;
188
    $trackBy?: string | ((item: any) => string);
189
  };
190
}
191

192
// Group validation for references
193
interface GroupValidation {
194
  [groupKey: string]: string[] | string;
195
}
196
```
197

198
[Collections and Nesting](./collections.md)