🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Vuelidation is a simple, lightweight, powerful form validator for Vue.js applications.

Form

Documentation

Vuelidation ✅

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>

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.


You May Also Like