simple, powerful, vuejs validation.
Build Status Coverage Status Downloads Gitter License
✨ Example✨
Install
yarn add --dev vuelidation@latest
Include Plugin
import Vue from 'vue'; import Vuelidation from 'vuelidation'; Vue.use(Vuelidation);
Use
<script> new Vue({ data () { return { name: '', } }, vuelidation: { data: { name: { required: true, }, }, }, methods: { submit () { if (this.$vuelidation.valid()) { console.log(`Hello, ${this.name}!`) } } } }) </script> <template> <form> <input type='text' v-model='name' /> <div v-if='$vuelidation.error("name")'>{{ $vuelidation.error('name') }}</div> <button type="submit" :disabled="$vuelidation.errors()">Submit</button> </form> </template>
alphabetic
- Must be a alphabetic value
- args: Boolean
{ alphabetic: true, }
alpha
- Must only contain letters and numbers
- args: Boolean
{ alpha: true, }
alphaDash
- msg: Must only contain letters, numbers, underscores or dashes
- arg: Boolean
{ alphaDash: true, }
alphaSpace
- msg: Must only contain letters, numbers or spaces
- arg: Boolean
{ alphaSpace: true, }
length
- msg: Must be {{ length }} character(s)
- arg: Number
{ length: 16, }
between
- msg: Must be between {{ min }} and {{ max }}
- arg: { min: Number, max: Number }
{ between: { min: 5, max: 10, }, }
betweenLength
- msg: Must have between {{ min }} and {{ max }} characters
- arg: { min: Number, max: Number }
{ betweenLength: { min: 8, max: 20, }, }
decimal
- msg: Must be a decimal<% if (points && points !== "*") { %> with {{ points }} points<% } %>
- arg: { points: *Number }
{ decimal: { points: 2, }, }
email
- msg: Not a valid email
- arg: Boolean
{ email: true, }
includes
- msg: {{ value }} is not one of the following: {{ values.join(", ") }}
- arg: { includes: Array }
{ includes: ['foo', 'bar'], }
numeric
- msg: Must be a numeric value
- arg: Boolean
{ numeric: true, }
required
- msg: Required
- arg: Boolean
{ required: true, }
* - the arg is optional.