Simple, Powerful, Vuejs 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.

Download Details:

Author: cj

Source Code: https://github.com/cj/vuelidation

#vue #vuejs #javascript