VeeValidate Form Validation Library for Vue Js

In this article, we will discuss “VeeValidate Form Validation Library for Vue Js”. VeeValidate is a wonderful library for Vue Js form validation. This will make form validations in Vue Js very easy. It has plenty of rule which we implement easily in the form. You can create the custom rules as well. It also supports localization and currently supports 44 languages.

It’s open-source library, and available at Github so you can use it in your commercial projects as well.

I’m assuming you are familiar with the Vue Js, if not you can start from the following articles.

Something About Vue Js with Its Features, a brief note.

Vue CLI 3 – New Game Changer for Frontend Development

Table of Contents

Toggle

Installation

You can install this library using the following npm command.

npm install vee-validate --save

CDN

You can also use library CDN in your project.

<!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<!-- cloudflair cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/vee-validate.min.js"></script>

Example

VeeValidate provides an easy way to apply the rules. “v-validate” directive is used, whenever we apply any rule. You need to check the input field must have a name attribute for error message generation. You can follow the given example.

<input v-validate="'required|email'" name="email" type="text">

In the above code snippet, “required|email” both are the validation rule.

You need to use the “error.first” method to fetch the error for the field.

<span>{{ errors.first('email') }}</span>

Available Validation Rules

List of available validation rules.

after
alpha
alpha_dash
alpha_num
alpha_spaces
before
between
confirmed
credit_card
date_between
date_format
decimal
digits
dimensions
email
ext
image
included
integer
ip
is
is_not
length
max
max_value
mimes
min
min_value
excluded
numeric
regex
required
size
url

Working Example

Here you can see the working example. You can also test here your own changes.

Conclusion

Today, we discuss a Vue Js Package. Lot’s of features available in this package, you can make your custom validation rules also. We will discuss more on this package. Please feel free to add your comment if any query or submit your feedback 😉

If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee