VeeValidate
Template Based 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 validation framework that offers validation for your fields using components and scoped slots.
Installation
# install with npm
npm install vee-validate
# 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: 'The {_field_} 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:
Backers
