Vuelidation ✅
simple, powerful, vuejs validation.
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>Validations
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.
