Available Rules

The following are the validation rules available for you, remember that they are not installed by default and you need to import and install them yourself, this allows you to only import what you need while keeping the bundle size for your application to minimum.

Importing The Rules

Validation rules are available as an ES6 exports at vee-validate/dist/rules, if you are using an IDE or VSCode you should have a small peek on what rules are available when you are importing them, here is how to import some common rules like required and min.

import { extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';

// No message specified.
extend('email', email);

// Override the default message.
extend('required', {
  ...required,
  message: 'This field is required'
});

And then you can use those rules immediately:

<ValidationProvider name="email" rules="required|email" v-slot="{ errors }">
  <input v-model="email" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

Installing All Rules

This is not recommended, but you need to have all of the vee-validate rules pre-configured, you can do that in two ways:

You can install all of vee-validate rules by looping over the entire set of rules using Object.keys like this:

import { extend } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule]);
});

// with typescript
for (let [rule, validation] of Object.entries(rules)) {
  extend(rule, {
    ...validation
  });
}

One downside of the previous snippet is that you lose the ability to define error messages as you no longer know which rule is in the iteration. Luckily vee-validate includes messages for all of those rules in 40+ locales that you can import, and they map nicely to rule names, let's define messages in our previous sample:



 


 
 
 
 


import { extend } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';
import { messages } from 'vee-validate/dist/locale/en.json';

Object.keys(rules).forEach(rule => {
  extend(rule, {
    ...rules[rule], // copies rule configuration
    message: messages[rule] // assign message
  });
});

Full Bundle

Another way of doing that is to import vee-validate's full bundle instead of the default one, which comes pre-installed with all the validation rules and their English messages.

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full.esm';

TIP

Make sure to reference vee-validate from the full bundle path if you are going to use it, aliasing it in your webpack config is a good idea since you don't want to end up with two vee-validate installations in your app.

Importing Rules in Nuxt.js

By default Nuxt ignores transpilation of the node_modules folder, and since the rules.js is an ES6 export. You should add vee-validate/dist/rules to the list of sources that will be transpiled. Otherwise you might run into "Unexpected Token: export" errors.

Add the following lines in your nuxt.config.js:

build: {
  // Add exception
  transpile: [
    "vee-validate/dist/rules"
  ],
  /*
    ** You can extend webpack config here
    */
  extend(config, ctx) {
    // ...
  }
}

Rules

WARNING

Rules marked with inferred can be automatically inferred from the HTML5 input attributes without providing rules prop. This does not work for custom components.

VeeValidate offers common validators that will cover most apps needs:

alpha

The field under validation may only contain alphabetic characters.

<ValidationProvider rules="alpha" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

alpha_dash

The field under validation may contain alphabetic characters, numbers, dashes or underscores.

<ValidationProvider rules="alpha_dash" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

alpha_num

The field under validation may contain alphabetic characters or numbers.

<ValidationProvider rules="alpha_num" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

alpha_spaces

The field under validation may contain alphabetic characters or spaces.

<ValidationProvider rules="alpha_spaces" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

between

The field under validation must have a numeric value bounded by a minimum value and a maximum value.

<ValidationProvider rules="between:1,11" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
min yes The minimum value.
max yes The maximum value.

confirmed

The field under validation must have the same value as the confirmation field.

<ValidationObserver>
  <ValidationProvider rules="confirmed:confirmation" v-slot="{ errors }">
    <input v-model="value" type="text">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>

  <ValidationProvider v-slot="{ errors }" vid="confirmation">
    <input v-model="confirmation" type="text">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</ValidationObserver>
Param Name Required? Default Description
target yes The other field's vid value.

digits

The field under validation must be numeric and have the specified number of digits.

<ValidationProvider rules="digits:3" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
length yes The number of digits allowed.

dimensions

The file added to the field under validation must be an image (jpg,svg,jpeg,png,bmp,gif) having the exact specified dimension.

<ValidationProvider rules="dimensions:120,120" v-slot="{ errors, validate }">
  <input type="file" @change="validate">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
width yes The width in pixels.
height yes The height in pixels.

email Inferred

The field under validation must be a valid email.

<ValidationProvider rules="email" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

Inference

This rule is automatically inferred if the input type is email, it also detects if the multiple attribute is set.

ext

The file added to the field under validation must have one of the extensions specified.

<ValidationProvider rules="ext:jpg,png" v-slot="{ errors, validate }">
  <input type="file" @change="validate">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

ext takes an infinite number of arguments representing extensions. ex: ext:jpg,png,bmp,svg.

image

The file added to the field under validation must have an image mime type (image/*).

<ValidationProvider rules="image" v-slot="{ errors, validate }">
  <input type="file" @change="validate">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

integer

The field under validation must be a valid integer value. Doesn't accept exponentiale notation.

<ValidationProvider rules="integer" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

is

The field under validation must match the given value, uses strict equality.

<ValidationProvider rules="is:hello" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
value yes A value of any type to be compared against the field value.

TIP

you should use this rule with the advanced rules object expression to take advantage of its full capabilities as you are only limited to comparing strings with the string format. See Advanced: Rules Object Expression

is_not

The field under validation must not match the given value, uses strict equality.

<ValidationProvider rules="is_not:hello" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
value yes A value of any type to be compared against the field value.

TIP

you should use this rule with the advanced rules object expression to take advantage of its full capabilities as you are only limited to comparing strings with the string format. See Advanced: Rules Object Expression

length

The field under validation must have exactly have the specified number of items, only works for iterables.

Allowed Iterable values are: string, array and any object that can be used with Array.from.

<ValidationProvider rules="length:4" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
length yes A numeric value representing the exact number of items the value can contain.

max Inferred

The field under validation length may not exceed the specified length.

<ValidationProvider rules="max:4" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
length yes A numeric value representing the maximum number of characters.

Inference

This rule is inferred when the field type is text and when maxlength attribute is set.

max_value Inferred

The field under validation must be a numeric value and must not be greater than the specified value.

<ValidationProvider rules="max_value:4" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
max yes A numeric value representing the greatest value allowed.

Inference

This rule is inferred when the field type is number and when max attribute is set.

mimes

The file type added to the field under validation should have one of the specified mime types.

<ValidationProvider rules="mimes:image/*" v-slot="{ errors, validate }">
  <input type="file" @change="validate">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

mimes take an infinite number of arguments that are formatted as file types. EG: mimes:image/jpeg,image/png.

Wild-card Types

You can use '_' to specify a wild card, something like mimes:image/_ will accept all image types.

min Inferred

The field under validation length should not be less than the specified length.

<ValidationProvider rules="min:4" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
length yes A numeric value representing the minimum number of characters.

Inference

This rule is inferred when the field type is text and when the minlength attribute is set.

min_value Inferred

<ValidationProvider rules="min_value:4" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

The field under validation must be a numeric value and must not be less than the specified value.

Param Name Required? Default Description
min yes A numeric value representing the smallest value allowed.

Inference

This rule is inferred when the field type is number and when min attribute is set.

numeric

The field under validation must only consist of numbers.

<ValidationProvider rules="numeric" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

oneOf

The field under validation must have a value that is in the specified list. Uses double equals for checks.

<ValidationProvider rules="oneOf:1,2,3" v-slot="{ errors }">
  <select v-model="value">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Invalid</option>
  </select>
  <span>{{ errors[0] }}</span>
</ValidationProvider>

oneOf takes an infinite number of params, each is a value that is allowed.

regex Inferred

The field under validation must match the specified regular expression.

<ValidationProvider :rules="{ regex: /^[0-9]+$/ }" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
pattern yes A regular expression instance or string representing one.

Heads up!

You should not use the pipe '|' or commas ',' within your regular expression when using the string rules format as it will cause a conflict with how validators parsing works. You should use the object format of the rules instead.

The `g` flag

When using the regex rule, using the g flag may result in unexpected falsy validations. This is because vee-validate uses the same instance across validation attempts.

Inference

This rule is inferred when the field type is text and pattern attribute is set.

required Inferred

The field under validation must have a non-empty value. By default, all validators pass the validation if they have "empty values" unless they are required. Those empty values are: empty strings, undefined, null, empty arrays.

<ValidationProvider rules="required" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
allowFalse no true Boolean to prevent false from being accepted.

Inference

This rule is inferred when the field type is marked with required attribute.

Required and `false`

Checkboxes by default emit true or false depending on wether they are checked or not. The required rule allows the false value by default, to disable this you may need to use the object syntax to configure the rule.

<ValidationProvider :rules="{ required: { allowFalse: false } }" v-slot="{ errors }">
  <!-- Your Field -->
</ValidationProvider>

required_if

The field under validation must have a non-empty value only if the target field (first argument) is set to one of the specified values (other arguments).

<ValidationProvider rules="" vid="country" v-slot="x">
  <select v-model="country">
    <option value="US">United States</option>
    <option value="OTHER">Other country</option>
  </select>
</ValidationProvider>

<ValidationProvider rules="required_if:country,US" v-slot="{ errors }">
  <input type="text" placeholder="state" v-model="state" />
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
target yes The vid of the target field.
...values no The values that will make the field required. If empty or not provided it will make the field required if the target field has a value.

size

The file size added to the field under validation must not exceed the specified size in kilobytes.

<ValidationProvider rules="size:100" v-slot="{ errors, validate }">
  <input type="file" @change="validate">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
Param Name Required? Default Description
size yes The maximum file size in kilobytes.