Skip to content

QingWei-Li/vuerify

Repository files navigation

Vuerify

Build Status npm Coverage Status badge-size

Validation plugin for Vue.js

Features

  • Supports both Vue 1.x and 2.0
  • Compact
  • Simple

Demo

Docs

Installation

npm i vuerify -S

install directive

# Vue 1.x
npm i v-vuerify -S

# Vue 2.x
npm i v-vuerify-next -S

Usage

import Vue from 'vue'
import Vuerify from 'vuerify'

Vue.use(Vuerify /*, add rules */)

component

{
  template: `
    <form @submit.prevent="handleSubmit">
      <input type="text" v-model="username">
      <input type="password" v-model="password">
      <input type="password" v-model="conform">
      <input type="submit">
      <ul><li v-for="err in errors" v-text="err"></li></ul>
    </form>
  `,
  data () {
    return {
      username: '',
      password: '',
      conform: ''
    }
  },

  vuerify: {
    username: 'required',
    password: {
      test: /\w{4,}/,
      message: '至少四位字符'
    },
    conform: {
      test (val) {
        return val === this.password
      },
      message: '密码输入不一致'
    }
  },

  computed: {
    errors () {
      return this.$vuerify.$errors
    }
  },

  methods: {
    handleSubmit () {
      if (this.$vuerify.check()) {
        // do sth
      }
    }
  }
}

Development

npm install
npm run dev

TODO

  • English Documentation

License

WTFPL