Vue.js 表單校驗插件

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

安裝

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 包含如下屬性

namedescriptiontypedefault Value

$errors數據校驗失敗的錯誤信息, 例如username 校驗失敗會返回{ username: '至少4 位字符' }Object{}

invalid存在校驗失敗的字段Booleantrue

valid不存在校驗失敗的字段Booleanfalse

check檢查指定字段，傳入數組，返回BooleanFunction(Array)-

clear清空錯誤列表Function-

v-vuerify

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

安裝

# 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

默認類名為vuerify-invalid

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

Modifiers

parent

如果vuerify 是在父組件註冊的，那麼就需要指定parent，讓指令可以從父組件獲取對應的$vuerify，具體看demo

Events

vuerify-invalid

vuerify-valid

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