Vue表单校验插件Vuerify使用详细教程及示例
前言
表单校验，在开发中是非常常见的，为了防止用户误操作，填写错误数据，亦或是防止用户恶意提交数据等，都需要前端同学来做一些简单的表单校验，虽然只是用来防君子的。今天就为大家推荐一款Vue表单校验插件：Vuerify。
什么是Vuerify？
Vuerify 是一款轻量级的数据校验 Vue 插件，同时支持 Vue 1 和 2。可以使用正则、函数定义校验规则，也可以调用全局设置的规则。 插件会在 Vue 实例上注册一个 $vuerify 对象，会对声明的数据进行 watch，实时校验数据合法性。 同时提供的指令还能方便的操作 DOM。
简单的讲：Vuerify就是自定义指令，用来校验页面填写数据。
Vuerify API
它的API也是相当的简介啊，所以轻量。
name | description | type | default Value |
|---|---|---|---|
$errors | 数据校验失败的错误信息, 例如 username 校验失败会返回 { username: '至少 4 位字符' }；如果 username 是数组，那么这里返回的也是数组类型 | Object | {} |
invalid | 存在校验失败的字段 | Boolean | true |
valid | 不存在校验失败的字段 | Boolean | false |
check | 检查指定字段，传入数组，返回 | Boolean | Function(Array) |
clear | 清空错误列表 | Function | - |
这里重点说一下check()方法，这里说了校验指定字段，传入数组，很多同学容易忽略这个，直接用check()方法，校验所有的项目，但是有时候不需要校验所有，比如：分步骤填写的页面，先校验第一步，再下一步，这时候传入数组来校验，就至关重要了。
如何使用Vuerify？
npm i vuerify -S然后我们通过一个简单示例来给大家讲讲具体使用方法
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name" v-vuerify="form.name"></el-input>
<span class="error" v-if="errors['form.name']">{{errors['form.name']}}</span>
</el-form-item>
<el-form-item label="活动描述">
<el-input type="textarea" v-model="form.desc" v-vuerify="form.desc"></el-input>
<span class="error" v-if="errors['form.desc']">{{errors['form.desc']}}</span>
</el-form-item>
<el-form-item label="活动标签">
<el-input v-model="form.label" v-vuerify="form.label"></el-input>
<span class="error" v-if="errors['form.label']">{{errors['form.label']}}</span>
</el-form-item>
<div>错误：{{errors}}</div>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>这里我们在input上面使用v-vuerify指令，来匹配校验规则。同时，判断计算属性computed里面的errors，有没有对应的错误，有并将错误显示出来。
js代码
// 引入插件
import Vue from 'vue'
import Vuerify from 'vuerify'
Vue.use(Vuerify)
export default {
data() {
return {
form: {
name: '',
desc: '',
label: ''
}
}
},
// 设置校验规则
vuerify: {
'form.name': {
test: /\w{4,}/,
message: '至少 4 位字符'
},
'form.desc': {
test: /\w{10,}/,
message: '至少 10 位字符'
},
'form.label': {
test: /\w{4,}/,
message: '至少 4 位字符'
}
},
computed: {
// 计算属性，获取校验不通过的对象
// 如 { "form.name": "至少 4 位字符", "form.desc": "至少 10 位字符" }
errors () {
return this.$vuerify.$errors
}
},
methods: {
onSubmit() {
let verifyList = ['form.name', 'form.desc'];
// check() 校验所有规则，参数可以设置需要校验的数组
if(!this.$vuerify.check(verifyList)){
return;
}
console.log('验证通过');
}
}
}最后点击onSubmit,来再次校验。但是我们这里传了需要校验的数组，只校验2个字段。
示例：
这里直接点击按钮，校验之后校验前面2个字段：
每个字段分别录入，实时校验：