智到功成
当前位置:首页 - 汽车美容 >

Vuerify表单校验插件使用详细教程

2019-09-07来源:中国书画艺术网

点击右上方红色按钮关注“web秀”,让你真正秀起来

前言

表单校验,在开发中是非常常见的,为了防止用户误操作,填写错误数据,亦或是防止用户恶意提交数据等,都需要前端同学来做一些简单的表单校验,虽然只是用来防君子的。今天就为大家推荐一款Vue表单校验插件:Vuerify。

Vuerify表单校验插件使用详细教程

Vue表单校验插件Vuerify使用详细教程及示例

什么是Vuerify?

Vuerify 是一款轻量级的数据校验 Vue 插件,同时支持 Vue 1 和 2。可以使用正则、函数定义校验规则,也可以调用全局设置的规则。 插件会在 Vue 实例上注册一个 $vuerify 对象,会对声明的数据进行 watch,实时校验数据合法性。 同时提供的指令还能方便的操作 DOM。

简单的讲:Vuerify就是自定义指令,用来校验页面填写数据。

Vuerify API

它的API也是相当的简介啊,所以轻量。

Vuerify表单校验插件使用详细教程

Vue表单校验插件Vuerify使用详细教程及示例

这里重点说一下check()方法,这里说了校验指定字段,传入数组,很多同学容易忽略这个,直接用check()方法,校验所有的项目,但是有时候不需要校验所有,比如:分步骤填写的页面,先校验第一步,再下一步,这时候传入数组来校验,就至关重要了。

如何使用Vuerify?

npm i vuerify -S

然后我们通过一个简单示例来给大家讲讲具体使用方法

Vuerify表单校验插件使用详细教程

Vue表单校验插件Vuerify使用详细教程及示例

这里我们在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个字段:

Vuerify表单校验插件使用详细教程

Vue表单校验插件Vuerify使用详细教程及示例

每个字段分别录入,实时校验:

Vuerify表单校验插件使用详细教程

Vue表单校验插件Vuerify使用详细教程及示例

是不是超级简单的就实现了你一直想要的效果了?留言说说你的看法,或者留下你宝贵意见。

转载文章地址:http://www.lbhfjd.com/qichemeirong/37578.html
(本文来自智到功成整合文章:http://www.lbhfjd.com)未经允许,不得转载!
标签:
相关推荐
网站简介 联系我们 网站申明 网站地图

版权所有:www.lbhfjd.com ?2017 智到功成

智到功成提供的所有内容均是网络转载或网友提供,本站仅提供内容展示服务,不承认任何法律责任。