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 email.

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>

Babel Transformation

Depending on your setup, you might run into issues importing rules from vee-validate/dist/rules as the file is using ES exports to allow tree shaking. You can fix that by either ignoring vee-validate/dist/rules from the transpilation process or importing rules from vee-validate/dist/rules.umd instead.

Installing All Rules

This is not recommended, but if 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.

excluded

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

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

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

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

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" name="number" 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">Four (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
`regex`	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 whether 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.

ValidationObserver

If a modification is made to the source of the required_if ("country" in the above example), the invalid and other flags of the ValidationObserver will not automatically be updated. One solution is to watch the data element and when it changes, manually call ValidationObserver.validate.

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.

double

The field under validation must have a valid decimal value.

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

<ValidationProvider rules="double:2,comma" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

Param Name	Required?	Default	Description
`decimals`	no	`0`	The count of decimal places (0 for accepting any count).
`separator`	no	`dot`	The separator (. or ,).

← Required Fields Validation State →

# Available Rules

# Importing The Rules

# Installing All Rules

# Full Bundle

# Importing Rules in Nuxt.js

# Rules

# alpha

# alpha_dash

# alpha_num

# alpha_spaces

# between

# confirmed

# digits

# dimensions

# email Inferred

# excluded

# ext

# image

# integer

# is

# is_not

# length

# max Inferred

# max_value Inferred

# mimes

# min Inferred

# min_value Inferred

# numeric

# oneOf

# regex Inferred

# required Inferred

# required_if

# size

# double

Available Rules

Importing The Rules

Installing All Rules

Full Bundle

Importing Rules in Nuxt.js

Rules

alpha

alpha_dash

alpha_num

alpha_spaces

between

confirmed

digits

dimensions

email Inferred

excluded

ext

image

integer

is

is_not

length

max Inferred

max_value Inferred

mimes

min Inferred

min_value Inferred

numeric

oneOf

regex Inferred

required Inferred

required_if

size

double