vuelidation
Vue.js validation
Last updated 3 years ago by ceej .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install vuelidation 
SYNC missed versions from official npm registry.

Vuelidation ✅

<q>simple, powerful, vuejs validation.</q>

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

<summary> alphabetic

  • Must be a alphabetic value
  • args: Boolean

</summary>
{
  alphabetic: true,
}
<summary> alpha

  • Must only contain letters and numbers
  • args: Boolean

</summary>
{
  alpha: true,
}
<summary> alphaDash

  • msg: Must only contain letters, numbers, underscores or dashes
  • arg: Boolean

</summary>
{
  alphaDash: true,
}
<summary> alphaSpace

  • msg: Must only contain letters, numbers or spaces
  • arg: Boolean

</summary>
{
  alphaSpace: true,
}
<summary> between

  • msg: Must be between {{ min }} and {{ max }}
  • arg: { min: Number, max: Number }

</summary>
{
  between: {
    min: 5,
    max: 10,
  },
}
<summary> betweenLength

  • msg: Must have between {{ min }} and {{ max }} characters
  • arg: { min: Number, max: Number }

</summary>
{
  betweenLength: {
    min: 8,
    max: 20,
  },
}
<summary> decimal

  • msg: Must be a decimal<% if (points && points !== "*") { %> with {{ points }} points<% } %>
  • arg: { points: *Number }

</summary>
{
  decimal: {
    points: 2,
  },
}
<summary> email

  • msg: Not a valid email
  • arg: Boolean

</summary>
{
  email: true,
}
<summary> includes

  • msg: {{ value }} is not one of the following: {{ values.join(", ") }}
  • arg: { includes: Array }

</summary>
{
  includes: ['foo', 'bar'],
}
<summary> numeric

  • msg: Must be a numeric value
  • arg: Boolean

</summary>
{
  numeric: true,
}
<summary> required

  • msg: Required
  • arg: Boolean

</summary>
{
  required: true,
}

* - the arg is optional.

Current Tags

  • 1.1.0                                ...           latest (3 years ago)

13 Versions

  • 1.1.0                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.0.10                                ...           3 years ago
  • 0.0.9                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 40
This Month 69
Last Day 9
Last Week 24
Last Month 161
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |