Vuerify 是一個(gè)簡(jiǎn)單輕量的數(shù)據(jù)校驗(yàn)插件。內(nèi)置基礎(chǔ)的校驗(yàn)規(guī)則和錯(cuò)誤提示?？勺远x規(guī)則，規(guī)則類型支持正則、函數(shù)或者字符串。校驗(yàn)規(guī)則可全局注冊(cè)也可以組件內(nèi)注冊(cè)。插件會(huì)給 vm 添加 $vuerify 對(duì)象，同時(shí) watch 數(shù)據(jù)并校驗(yàn)合法性，如果有錯(cuò)誤會(huì)存入 vm.$vuerify.$errors。

安裝

npm i vuerify -S

使用

安裝插件

import Vue from 'vue'import Vuerify from 'vuerify'Vue.use(Vuerify, /* 添加自定義規(guī)則 */)

添加自定義規(guī)則
test 可以是正則或者函數(shù)

{ required: {  test: //S+$/,  message: '必填項(xiàng)' }}

組件內(nèi)注冊(cè)

{ data () {  username: '',  password: '' }, vuerify: {  username: {   test: //w{4,}/, // 自定義規(guī)則，可以是函數(shù)，正則或者全局注冊(cè)的規(guī)則（填字符串）   message: '至少 4 位字符'  },  password: 'required' // 使用全局注冊(cè)的規(guī)則 }}

API

$vuerify 包含如下屬性

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

v-vuerify

該指令可以在表單組件觸發(fā) blur 事件時(shí)驗(yàn)證數(shù)據(jù)并為組件設(shè)置類名(默認(rèn)為 .vuerify-invalid)?？梢允?input 等原生組件，也可以是自己封裝過(guò)的組件。提供兩個(gè)版本

安裝

# Vue 1.xnpm v-vuerify -S# Vue 2.0npm v-vuerify-next -S

用法

import Vue from 'vue'import VuerifyDirective from 'v-vuerify' // Vue1.ximport VuerifyDirective from 'v-vuerify-next' // Vue2.0Vue.use(VuerifyDirective)<input v-model="username" v-vuerify="'username'"><x-input :value.sync="password" v-vuerify="'password'"></x-input>

Params

verifyInvalidClass

默認(rèn)類名為 vuerify-invalid

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

Modifiers

parent
如果 vuerify 是在父組件注冊(cè)的，那么就需要指定 parent，讓指令可以從父組件獲取對(duì)應(yīng)的 $vuerify，具體看 demo

Events

vuerify-invalid
vuerify-valid

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