一款簡單輕量的 Vue.js 表單校驗插件，支持 1.x 和 2.0

Github: https://github.com/QingWei-Li/vuerify

Vuerify 是一個簡單輕量的數據校驗插件。內置基礎的校驗規則和錯誤提示。可自定義規則，規則類型支持正則、函數或者字符串。校驗規則可全局註冊也能夠組件內註冊。插件會給 vm 添加 $vuerify 對象，同時 watch 數據並校驗合法性，若是有錯誤會存入 vm.$vuerify.$errors。

演示

• basic 基礎用法

• directive 結合指令使用

• directive for Vue2.0

• mint-ui 結合組件庫使用

安裝

npm i vuerify -S

使用

安裝插件

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

Vue.use(Vuerify, /* 添加自定義規則 */)

添加自定義規則

test 能夠是正則或者函數

{
  required: {
    test: /\S+$/,
    message: '必填項'
  }
}

組件內註冊

{
  data () {
    username: '',
    password: ''
  },

  vuerify: {
    username: {
      test: /\w{4,}/,  // 自定義規則，能夠是函數，正則或者全局註冊的規則（填字符串）
      message: '至少 4 位字符'
    },
    password: 'required' // 使用全局註冊的規則
  }
}

API

$vuerify 包含以下屬性

name	description	type	default Value
$errors	數據校驗失敗的錯誤信息, 例如 username 校驗失敗會返回 { username: '至少 4 位字符' }	Object	{}
invalid	存在校驗失敗的字段	Boolean	true
valid	不存在校驗失敗的字段	Boolean	false
check	檢查指定字段，傳入數組，返回 Boolean	Function(Array)	-
clear	清空錯誤列表	Function	-

v-vuerify

該指令能夠在表單組件觸發 blur 事件時驗證數據併爲組件設置類名(默認爲 .vuerify-invalid)。能夠是 input 等原生組件，也能夠是本身封裝過的組件。提供兩個版本

安裝

# Vue 1.x
npm v-vuerify -S

# Vue 2.0
npm v-vuerify-next -S

用法

import Vue from 'vue'
import VuerifyDirective from 'v-vuerify' // Vue1.x
import VuerifyDirective from 'v-vuerify-next' // Vue2.0

Vue.use(VuerifyDirective)

<input v-model="username" v-vuerify="'username'">

<x-input :value.sync="password" v-vuerify="'password'"></x-input>

Params

• verifyInvalidClass

默認類名爲 vuerify-invalid

<input v-model="username" v-vuerify="'username'" vuerify-invalid-class="error">

Modifiers

• parent

若是 vuerify 是在父組件註冊的，那麼就須要指定 parent，讓指令能夠從父組件獲取對應的 $vuerify，具體看 demo

Events

• vuerify-invalid

• vuerify-valid