0
# Format Validators
1

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

4
## Capabilities
5

6
### Email Validator
7

8
Validates that a string is a properly formatted email address.
9

10
```javascript { .api }
11
/**
12
 * Validates that string is a properly formatted email address
13
 * Uses RFC 5322 compliant email validation pattern
14
 * @returns ValidationRuleWithoutParams that returns true if string is valid email
15
 */
16
const email: ValidationRuleWithoutParams;
17
```
18

19
**Usage Examples:**
20

21
```javascript
22
import { email, required } from "@vuelidate/validators";
23

24
// In validation rules (most common usage)
25
const validationRules = {
26
  userEmail: { required, email }
27
};
28

29
// Direct validator function usage for testing
30
const emailValidator = email;
31
const validEmail1 = emailValidator.$validator("user@example.com"); // true
32
const validEmail2 = emailValidator.$validator("john.doe+tag@company.co.uk"); // true
33
const validEmail3 = emailValidator.$validator("test123@subdomain.domain.org"); // true
34

35
const invalidEmail1 = emailValidator.$validator("invalid-email"); // false
36
const invalidEmail2 = emailValidator.$validator("@example.com"); // false
37
const invalidEmail3 = emailValidator.$validator("user@"); // false
38
```
39

40
### URL Validator
41

42
Validates that a string is a properly formatted URL.
43

44
```javascript { .api }
45
/**
46
 * Validates that string is a properly formatted URL
47
 * Accepts http, https, ftp protocols and validates URL structure
48
 * @returns ValidationRuleWithoutParams that returns true if string is valid URL
49
 */
50
const url: ValidationRuleWithoutParams;
51
```
52

53
**Usage Examples:**
54

55
```javascript
56
import { url } from "@vuelidate/validators";
57

58
// In validation rules (most common usage)
59
const validationRules = {
60
  website: { url }
61
};
62

63
// Direct validator function usage for testing
64
const urlValidator = url;
65
const validUrl1 = urlValidator.$validator("https://example.com"); // true
66
const validUrl2 = urlValidator.$validator("http://subdomain.example.com/path"); // true
67
const validUrl3 = urlValidator.$validator("ftp://files.example.com"); // true
68

69
const invalidUrl1 = urlValidator.$validator("not-a-url"); // false
70
const invalidUrl2 = urlValidator.$validator("example.com"); // false (missing protocol)
71
const invalidUrl3 = urlValidator.$validator("https://"); // false (incomplete)
72
```
73

74
### IP Address Validator
75

76
Validates that a string is a properly formatted IP address (IPv4 or IPv6).
77

78
```javascript { .api }
79
/**
80
 * Validates that string is a properly formatted IP address
81
 * Supports both IPv4 and IPv6 address formats
82
 * @returns ValidationRuleWithoutParams that returns true if string is valid IP address
83
 */
84
const ipAddress: ValidationRuleWithoutParams;
85
```
86

87
**Usage Examples:**
88

89
```javascript
90
import { ipAddress, required } from "@vuelidate/validators";
91

92
// In validation rules (most common usage)
93
const validationRules = {
94
  serverIP: { required, ipAddress }
95
};
96

97
// Direct validator function usage for testing
98
const ipValidator = ipAddress;
99

100
// Valid IPv4 addresses
101
const validIPv4_1 = ipValidator.$validator("192.168.1.1"); // true
102
const validIPv4_2 = ipValidator.$validator("10.0.0.1"); // true
103
const validIPv4_3 = ipValidator.$validator("127.0.0.1"); // true
104

105
// Valid IPv6 addresses
106
const validIPv6_1 = ipValidator.$validator("2001:0db8:85a3:0000:0000:8a2e:0370:7334"); // true
107
const validIPv6_2 = ipValidator.$validator("::1"); // true (localhost)
108
const validIPv6_3 = ipValidator.$validator("fe80::1"); // true
109

110
// Invalid IP addresses
111
const invalidIP1 = ipValidator.$validator("256.256.256.256"); // false (IPv4 out of range)
112
const invalidIP2 = ipValidator.$validator("192.168.1"); // false (incomplete IPv4)
113
const invalidIP3 = ipValidator.$validator("not-an-ip"); // false
114
```
115

116
### MAC Address Validator
117

118
Validates that a string is a properly formatted MAC address with a customizable separator.
119

120
```javascript { .api }
121
/**
122
 * Validates that string is a properly formatted MAC address
123
 * @param separator - Character used to separate MAC address octets (e.g., ":", "-")
124
 * @returns ValidationRuleWithoutParams that returns true if string is valid MAC address
125
 */
126
function macAddress(separator: string | Ref<string>): ValidationRuleWithoutParams;
127
```
128

129
**Usage Examples:**
130

131
```javascript
132
import { macAddress } from "@vuelidate/validators";
133
import { ref } from "vue";
134

135
// MAC address with colon separator
136
const colonMAC = macAddress(":");
137
const validColon1 = colonMAC("00:1B:44:11:3A:B7"); // true
138
const validColon2 = colonMAC("AA:BB:CC:DD:EE:FF"); // true
139

140
// MAC address with dash separator
141
const dashMAC = macAddress("-");
142
const validDash1 = dashMAC("00-1B-44-11-3A-B7"); // true
143
const validDash2 = dashMAC("aa-bb-cc-dd-ee-ff"); // true (case insensitive)
144

145
// Invalid MAC addresses
146
const invalidMAC1 = colonMAC("00:1B:44:11:3A"); // false (too short)
147
const invalidMAC2 = colonMAC("00:1B:44:11:3A:G7"); // false (invalid hex)
148
const invalidMAC3 = dashMAC("00:1B:44:11:3A:B7"); // false (wrong separator)
149

150
// Reactive separator
151
const separatorRef = ref(":");
152
const dynamicMAC = macAddress(separatorRef);
153

154
// Change separator reactively
155
separatorRef.value = "-";
156

157
// In validation rules
158
const validationRules = {
159
  deviceMAC: { required, macAddress: macAddress(":") }
160
};
161
```
162

163
## Common Usage Patterns
164

165
### Combining Format Validators
166

167
Format validators can be combined with other validators for comprehensive validation:
168

169
```javascript
170
import { required, email, url, minLength } from "@vuelidate/validators";
171

172
const contactFormRules = {
173
  email: { 
174
    required, 
175
    email,
176
    minLength: minLength(5) 
177
  },
178
  website: { 
179
    url 
180
  }, // Optional field - only validates format if provided
181
  description: {
182
    required,
183
    minLength: minLength(10)
184
  }
185
};
186
```
187

188
### Network Configuration Validation
189

190
```javascript
191
import { required, ipAddress, macAddress, between } from "@vuelidate/validators";
192

193
const networkConfigRules = {
194
  serverIP: { required, ipAddress },
195
  gatewayIP: { required, ipAddress },
196
  deviceMAC: { required, macAddress: macAddress(":") },
197
  port: { required, between: between(1, 65535) }
198
};
199
```