
VeeValidate
Form Validation for Vue.js
๐ Easy
Declarative validation that is familiar and easy to setup
๐งโโ๏ธ Flexible
Synchronous, Asynchronous, field-level, or form-level validation
โก๏ธ Fast
Build faster forms faster with intuitive API and small footprint
๐ Minimal
Only handles the complicated and painful form concerns, gives you full control over everything else
๐ฒ Tree-shakeable
Smaller bundle size means faster startup times, import what you need.
๐ UI Agnostic
Works with native HTML elements or your favorite UI library components
๐ฆพ Progressive
Works with any setup whether you use Vue.js as a progressive enhancement or in a complex setup
โ Built-in Rules
Companion lib with 25+ Rules that covers most needs in most web applications
๐ i18n
45+ locales for built-in rules contributed by developers from all over the world
Sponsors
Thanks for the following companies and individuals who are supporting vee-validate
You can also help this this project and my other projects by donating one time or by sponsoring via the following link
Quick Setup
Installation
sh# install with yarn
yarn add vee-validate
# install with npm
npm install vee-validate --save
Or use a CDN
html<script src="https://unpkg.com/vee-validate"></script>
Usage
Register the Field
and Form
components and create a simple required
validator:
jsimport { Field, Form } from 'vee-validate';
export default {
components: {
Field,
Form,
},
methods: {
// Validator function
isRequired(value) {
return value ? true : 'This field is required';
},
},
};
Then use the Form
and Field
components to render your form:
vue-html<Form v-slot="{ errors }">
<Field name="field" :rules="isRequired" />
<span>{{ errors.field }}</span>
</Form>
For more information continue reading the Guide.