Form validation is a feature that’s not built into Vue.js.
However, we still need this feature very much.
In this article, we’ll look at how to use built-in validation rules that take arguments.
Rules
Many rules take one or more arguments.
digits
digits can be used as follows:
<ValidationProvider rules="digits:10" v-slot="{ errors }">
<input v-model="value" type="text">
<span>{{ errors[0] }}</span>
</ValidationProvider>
where 10 is the number of digits allowed
dimensions
dimensions checks the dimensions of the image file selected:
<ValidationProvider rules="dimensions:220,230" v-slot="{ errors, validate }">
<input type="file" @change="validate">
<span>{{ errors[0] }}</span>
</ValidationProvider>
220 is the width and 230 is the height.
excluded
excluded checks if something isn’t in the list:
<ValidationProvider rules="excluded:1,2" name="number" v-slot="{ errors }">
<select v-model="value">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<span>{{ errors[0] }}</span>
</ValidationProvider>
1 and 2 are arguments of excluded , so they’re invalid.
ext
ext checks if a selected file has the given extension specified:
<ValidationProvider rules="ext:jpg,png" v-slot="{ errors, validate }">
<input type="file" @change="validate">
<span>{{ errors[0] }}</span>
</ValidationProvider>
So jpg and png are valid file extensions.
is_not
is_not takes an argument to exclude.
For example, we can write:
<ValidationProvider rules="is_not:foo" v-slot="{ errors }">
<input type="text" v-model="value">
<span>{{ errors[0] }}</span>
</ValidationProvider>
foo is the value that’s not valid when entered.
length
length means that the string must be a string or array value that must have the given length.
Therefore, if we have:
<ValidationProvider rules="length:5" v-slot="{ errors }">
<input type="text" v-model="value">
<span>{{ errors[0] }}</span>
</ValidationProvider>
Then the inputted value must have length 5.
max
max checks if the inputted value doesn’t exceed the specified length.
For example, we can write:
<ValidationProvider rules="max:5" v-slot="{ errors }">
<input type="text" v-model="value">
<span>{{ errors[0] }}</span>
</ValidationProvider>
We have 5 as the argument, so the inputted value can’t exceed the length of 5.
max_value
max_value checks if something can’t exceed the maximum value.
We can write:
<ValidationProvider rules="max_value:5" v-slot="{ errors }">
<input type="text" v-model="value">
<span>{{ errors[0] }}</span>
</ValidationProvider>
mimes
mimes checks the selected file has the given mime type.
For example, we can write:
<ValidationProvider rules="mimes:image/*" v-slot="{ errors, validate }">
<input type="file" @change="validate">
<span>{{ errors[0] }}</span>
</ValidationProvider>
This will check the file is an image.
min
min is the validation length shouldn’t be less than the specified length.
If we have:
<ValidationProvider rules="min:5" v-slot="{ errors }">
<input type="text" v-model="value">
<span>{{ errors[0] }}</span>
</ValidationProvider>
Then the inputted value must have a length 5 or longer.
min_value
min_value checks if a numeric value is bigger than or equal to the given argument.
For example, if we have:
<ValidationProvider rules="min_value:5" v-slot="{ errors }">
<input type="text" v-model="value">
<span>{{ errors[0] }}</span>
</ValidationProvider>
Then value must be bigger than or equal to 5.
oneOf
oneOf takes one or more arguments to check if the selected value is one of the listed values.
If we have:
<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">hour</option>
</select>
<span>{{ errors[0] }}</span>
</ValidationProvider>
We have 1, 2, and 3 as the arguments, so they are the only valid values.
regex
regex lets us match a value that matches the given regex.
If we have:
<ValidationProvider :rules="{ regex: /^[0-9]+$/ }" v-slot="{ errors }">
<input type="text" v-model="value">
<span>{{ errors[0] }}</span>
</ValidationProvider>
then we match the regex /^[0–9]+$/ which is a string with digits.
required
The required field can take an object with the allowFalse property, which is true if we want to allow false as a valid value.
For example, to allow false as a valid value when we use the required rule, we write:
<ValidationProvider :rules="{ required: { allowFalse: false } }" v-slot="{ errors }">
<!-- ... -->
</ValidationProvider>
required_if
required_if lets us check if a field is required if another field has the given value.
For instance, we can use it by writing:
<ValidationProvider rules="" vid="country" v-slot="{ errors }">
<select v-model="country">
<option value="Canada">Canada</option>
<option value="other">Other country</option>
</select>
</ValidationProvider>
<ValidationProvider rules="required_if:country,Canada" v-slot="{ errors }">
<input type="text" placeholder="province" v-model="province" />
<span>{{ errors[0] }}</span>
</ValidationProvider>
We have the vid on the first field so that we can reference it in the field below.
required_if references the vid value.
The second argument is the value.
size
size is used to check if a file exceeds the given size in kilobytes.
We can write:
<ValidationProvider rules="size:100" v-slot="{ errors, validate }">
<input type="file" @change="validate">
<span>{{ errors[0] }}</span>
</ValidationProvider>
validate is used to check the value when the file selection changes.
Conclusion
There are many built-in validation rules.
Some of them take arguments. There are rules to check file sizes and input values.
