Nicely Pointed Mandibles

    vuelidation

    1.1.0 • Public • Published

    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,
    }
    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.

    Keywords

    none

    Install

    npm i vuelidation

    DownloadsWeekly Downloads

    41

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • ceej