Vuelidation ✅
simple, powerful, vuejs validation.
✨ Example✨
Install
yarn add --dev vuelidation@latest
Include Plugin
;; Vue;
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
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 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.