VeeValidate
Template Based Form Validation Framework for Vue.js
Simple
Template based validation that is both familiar and easy to setup.
Flexible
Validate HTML inputs and Vue components, generate localized errors, Extendable, It does it all.
Configurable
Config that doesn't get into your way, everything is optional.
Version
This is the docs for vee-validate 3.x. You access the docs for the old version 2.x from here.
Quick Setup
VeeValidate is a form validation framework for Vue.js.
Installation
# install with npm
npm install vee-validate --save
# install with yarn
yarn add vee-validate
Usage
Register the ValidationProvider component and add the required rule:
import { ValidationProvider, extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';
extend('required', {
...required,
message: 'This field is required'
});
new Vue({
el: '#app',
components: {
ValidationProvider
},
data: () => ({
value: ''
})
});
Wrap your inputs with the ValidationProvider:
<validation-provider rules="required" v-slot="{ errors }">
<input v-model="value" name="myinput" type="text" />
<span>{{ errors[0] }}</span>
</validation-provider>
And this is the result: