点击右上方红色按钮关注“web秀”,让你真正秀起来
前言
表单校验,在开发中是非常常见的,为了防止用户误操作,填写错误数据,亦或是防止用户恶意提交数据等,都需要前端同学来做一些简单的表单校验,虽然只是用来防君子的。今天就为大家推荐一款Vue表单校验插件:Vuerify。
什么是Vuerify?
Vuerify 是一款轻量级的数据校验 Vue 插件,同时支持 Vue 1 和 2。可以使用正则、函数定义校验规则,也可以调用全局设置的规则。 插件会在 Vue 实例上注册一个 $vuerify 对象,会对声明的数据进行 watch,实时校验数据合法性。 同时提供的指令还能方便的操作 DOM。
简单的讲:Vuerify就是自定义指令,用来校验页面填写数据。
Vuerify API
它的API也是相当的简介啊,所以轻量。
这里重点说一下check()方法,这里说了校验指定字段,传入数组,很多同学容易忽略这个,直接用check()方法,校验所有的项目,但是有时候不需要校验所有,比如:分步骤填写的页面,先校验第一步,再下一步,这时候传入数组来校验,就至关重要了。
如何使用Vuerify?
npm i vuerify -S
然后我们通过一个简单示例来给大家讲讲具体使用方法
这里我们在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 位字符