Vuerify is a simple and lightweight data verification plug-in. Built-in basic verification rules and error prompts. Customizable rules, and the rule types support regular, functions, or strings. Verification rules can be registered globally or within components. The plug-in will add $vuerify object to vm, and at the same time watch the data and verify the legality. If there is an error, vm.$vuerify.$errors will be stored.
Install
npm i vuerify -S
use
Install plug-ins
import Vue from 'vue'import Vuerify from 'vuerify'Vue.use(Vuerify, /* Add custom rules*/)
Add custom rules
test can be a regular or a function
{ required: { test: //S+$/, message: 'Required' }}Register within components
{ data () { username: '', password: '' }, vuerify: { username: { test: //w{4,}/, // Custom rules, which can be functions, regular or global registration rules (fill in strings) message: 'at least 4 characters' }, password: 'required' // Rules for using global registration}}API
$vuerify contains the following properties
namedescriptiontypedefault Value
$errors error message failing to check data, for example, if the username fails to check, it will return { username: 'at least 4 characters' }Object{}
invalid has field that failed to check Booleantrue
Valid does not have a field that fails to check Booleanfalse
Check check the specified field, pass it in the array, and return BooleanFunction(Array)-
clear clear error list Function-
v-vuerrify
This directive validates data and sets a class name for the component when the form component triggers a blur event (default is .vuerify-invalid). It can be native components such as input, or it can be a component that has been encapsulated by itself. Two versions are available
Install
# Vue 1.xnpm v-vuerify -S# Vue 2.0npm v-vuerify-next -S
usage
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>
Param
verifyInvalidClass
The default class name is vuerify-invalid
<input v-model="username" v-vuerify="'username'" vuerify-invalid-class="error">
Modifiers
parent
If vuerify is registered with the parent component, then you need to specify a parent so that the directive can obtain the corresponding $vuerify from the parent component. For details, see the demo
Events
vuerify-invalid
vuerify-valid
Github: https://github.com/QingWei-Li/vuerrify