Validation Rules

Bundle size

VeeValidate default bundle do no include any of these rules, you can import them indivdually:

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

extend('required', {
  ...required,
  message: 'field is required'
});

Or you can import all rules by using the full bundle which has a larger footprint on your app:

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

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>

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.

is

The field under validation must be equal to the first argument passed, uses === for equality checks. This rule is useful for confirming passwords when used in object form. Note that using the string format will cause any arguments to be parsed as strings, so use the object format when using this rule.

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

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>

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 yes The values that will make the field required.

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.