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

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