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

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.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

轉載于:https://www.cnblogs.com/yuzhengbo/p/6594511.html

總結

以上是生活随笔為你收集整理的Vue.js 表单校验插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。