UI Utilities > Validation
Vuelidation ✅
simple, powerful, vuejs validation.
✨ 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>
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.