Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
vee-validate
Advanced tools
vee-validate is a form validation library for Vue.js that allows you to validate inputs and forms with ease. It provides a set of validation rules and the ability to create custom rules, making it highly flexible and customizable.
Basic Validation
This example demonstrates basic validation using vee-validate. The input field for email is validated to ensure it is required and follows the email format. Errors are displayed using the `errors.first` method.
{
"template": "<form @submit.prevent=\"submitForm\"><input v-model=\"email\" name=\"email\" v-validate=\"'required|email'\" /><span>{{ errors.first('email') }}</span><button type=\"submit\">Submit</button></form>",
"data": "function() { return { email: '' }; }",
"methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }"
}
Custom Validation Rules
This example shows how to create and use custom validation rules in vee-validate. The custom rule 'unique' checks if the username is not 'admin' and displays an error message if it is.
{
"template": "<form @submit.prevent=\"submitForm\"><input v-model=\"username\" name=\"username\" v-validate=\"'required|unique'\" /><span>{{ errors.first('username') }}</span><button type=\"submit\">Submit</button></form>",
"data": "function() { return { username: '' }; }",
"methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }",
"created": "function() { this.$validator.extend('unique', { getMessage: field => `The ${field} is already taken.`, validate: value => new Promise(resolve => { setTimeout(() => { resolve({ valid: value !== 'admin' }); }, 500); }) }); }"
}
Validation with Async Rules
This example demonstrates how to use asynchronous validation rules in vee-validate. The custom rule 'is-available' checks if the email is not 'test@example.com' with a simulated delay.
{
"template": "<form @submit.prevent=\"submitForm\"><input v-model=\"email\" name=\"email\" v-validate=\"'required|email|is-available'\" /><span>{{ errors.first('email') }}</span><button type=\"submit\">Submit</button></form>",
"data": "function() { return { email: '' }; }",
"methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }",
"created": "function() { this.$validator.extend('is-available', { getMessage: field => `The ${field} is not available.`, validate: value => new Promise(resolve => { setTimeout(() => { resolve({ valid: value !== 'test@example.com' }); }, 1000); }) }); }"
}
Vuelidate is another popular validation library for Vue.js. It provides a simple and flexible way to validate forms and inputs. Unlike vee-validate, Vuelidate uses a model-based approach, which can be more intuitive for some developers.
Vue Formulate is a powerful form library for Vue.js that includes built-in validation. It offers a wide range of features, including form generation, validation, and custom input components. Compared to vee-validate, Vue Formulate provides a more comprehensive solution for form handling.
Buefy is a lightweight UI component library for Vue.js based on Bulma. It includes form validation features as part of its form components. While not as feature-rich as vee-validate, Buefy provides a good option for developers already using Bulma for styling.
vee-validate is a lightweight plugin for VueJS that allows you to validate input fields, and display errors.
What makes it different is: You don't have to do anything fancy in your app, most of the work goes into the html, You only need to specify for each input what kind of validators should be used when the value changes. You will then get informed of the errors for each field.
Although most of the validations occur automatically, you can use the validator however you see fit. The validator object has no dependencies and is a standalone object. This plugin is built with localization in mind. and currently there are over 20 validation rules available in the plugin. Read the docs for more info.
This plugin is inspired by PHP Framework Laravel's validation.
npm install vee-validate --save
or if you are using Vue 2.0:
npm install vee-validate@next --save
In your script entry point:
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
Now you are all setup to use the plugin.
Just apply the v-validate
directive on your input and a rules
attribute which is a list of validations separated by a pipe, for example we will use the required
and the email
validators:
<input v-validate data-rules="required|email" type="text" name="email">
Now every time the input changes, the validator will run the list of validations from left to right, populating the errors helper object whenever an input fails validation.
To access the errors object (in your vue instance):
this.$validator.errorBag;
// or
this.errors; // injected into $data by the plugin, you can customize the property name.
Of course there is more to it than that, refer to the documentation for more details about the rules, and usage of this plugin.
Read the documentation and demos.
FAQs
Painless forms for Vue.js
The npm package vee-validate receives a total of 486,772 weekly downloads. As such, vee-validate popularity was classified as popular.
We found that vee-validate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.