Vue 表单验证插件
JarryChen 发布时间:2020-06-08 文章字数:384 预计用时:1分55秒
在我们日常的开发过程中,很经常的就会遇到需要做一个表单来提交数据。在做的过程中,各种必填required,各种杂七杂八的要求,就要写对应的rules去做验证,而这么做是停留在你使用ui框架提供的form及其验证的前提下来做才是简单的。否则,一堆的判断就够你焦头烂额了,更何况还有酷炫的需求等等。
针对这个问题,如果你是用 vue 作为 cli 的话,可以考虑这几个插件,vuerify, v-vuerify-next, vee-validate……等等,而在提及的这些插件中,本人在开发时所用到的正是vuerify及v-vuerify-next配合使用,按照网上的说法,vee-validate就没配置成功,所以这个是果断放弃了。下面就总结一下遇到的问题吧 ^_^
# 1. 安装插件
关于这一点,应该不用多说了
npm i vuerify -S
npm i v-vuerify-next -S
# 2. 引入插件
在全局配置文件main.js中,写下以下代码,由于不需要花里胡哨的功能,所以只用了最简单的部分
import Vue from 'vue';
import Vuerify from 'vuerify';
import VuerifyDirector from 'v-vuerify-next';
Vue.use(Vuerify);
//这里可以配置一些需要用到的全局规则等等
Vue.use(VuerifyDirector);
引入后,视情况可在Vue.use(Vuerify, //加上自定义全局规则{} ),安装完插件,已自带有required,url等。
# 3. 修复 removeEventListener……的 bug
这个 bug 主要是由 v-vuerify-next 所引发的,查了一下网上所说,报这个错的时候在于移除监听的时候缺少参数,根据这个线索,定位到 node_modules/v-vuerify-next/vuerify.common.js文件中的unbind字段,这里是取消绑定命令的执行方法。不知道是否是作者忘记加上的原因,这里少了一些东西,具体对比如下:
# 改之前
//...省略代码
unbind: function unbind(el) {
el.removeEventListener('blur');
el.removeEventListener('focus');
}
//...省略代码
# 改之后
//...省略代码
unbind: function unbind(el) {
el.removeEventListener(
'blur',
function () {
var err = vm.$vuerify.$errors[binding.value];
if (err) {
addClass(el, errorClass);
vm.$emit('vuerify-invalid', binding.value, err);
} else {
removeClass(el, errorClass);
vm.$emit('vuerify-valid', binding.value);
}
},
true
);
el.removeEventListener(
'focus',
function () {
removeClass(el, errorClass);
},
true
);
}
//...省略代码
# 4. 使用
以上问题都解决了之后,就可以开始来使用该插件了,vuerify是主要的处理,v-vuerify-next是才用了watch监听,传数据到其中进行判断,具体如下:
export default {
data() {
return {};
},
//这里主要写几个作为例子
vuerify: {
"form.name" : 'required', //这里是全局自带的规则,也可以自定义一个
"form.money": [ //多个要求的话使用数组包住,错误消息则会是一个数组
{ //验表单里的变量都要这样写,错误的话则为errors['form.money']类似
test: function () {
return this.validOrdinary(this.form.money);
},
message: "请输入",
},
{
test: function () {
return this.validVal(this.form.money);
},
message: "低于2000万元",
}, //由于有多个消息提示,一般是互斥出现的,则可以采用errors['form.money'][0]这样就不会出现数组的框框了
],
gaysTreatmentWay: { //这里使用函数判断,主要是因为正则表达式判断不了undefined的变量
test: function () {
return this.validSimpleObj(this.gaysTreatmentWay);
},
message: "请选择",
},
otherFacilities: {
test: function () {
return this.validComplicateObj(this.otherFacilities);
},
message: '请输入'
},
computed: {
errors() {
return this.$vuerify.$errors; //错误
},
pass() {
return this.$vuerify.check(); //可传入字段名进行单独验证,不传则是验全部
}
},
methods: {
//验证一般变量
validOrdinary(val) {
return val != undefined && val != "";
},
//验证简单对象
validSimpleObj(obj) {
return obj.some((item) => item.check === true);
},
//验证复杂对象
validComplicateObj(obj) {
let noOne = obj.some((item) => item.check === true);
if (noOne) {
for (let item of obj) {
if (item.check) {
let flag = item.item.every((input) => input.value != "");
if (!flag) return false;
}
}
return true;
} else {
return false;
}
},
},
};
<!--该插件主要监听blur 和 change事件,对原声组件和ui组件都是可以监听到的,举个例子-->
<!--只监听单个输入框-->
<van-field
v-model="form.money"
required
type="number"
label="钱"
v-vuerify="form.money"
placeholder="请输入钱数"
clearable
colon
maxlength="9"
>
<template #button>
<span>(m<sup>3</sup>/d)</span>
</template>
</van-field>
<!--复杂监听-->
<div style="min-height:100px;">
<p style="text-align:center;">
<span class="impo">*</span>测试字段(mg/L)
<span v-if="errors.testVal" style="color:red;padding-left:10px;"
>{{errors.testVal}}</span
>
</p>
<div class="waste-water">
<div v-for="(per, index) in testVal" :key="index" class="per-item">
<template v-for="(perItem, perIndex) in per.item">
<p :key="perIndex+10">
<el-checkbox
v-model="per.check"
v-vuerify="testVal"
@change="()=>{
perItem.value = ''
}"
>{{perItem.label}}</el-checkbox
>
<el-input
style="border-bottom:solid 1px black; width: 50px;"
size="mini"
v-model="perItem.value"
v-vuerify="testVal"
:readonly="!per.check"
></el-input>
</p>
</template>
</div>
</div>
</div>
# 5. 使用体会
就目前看来,修复了第三个的bug之后,表现正常。面对这种很多变量的表单,如果不是用ui框架特有的有带验证的组件去做的话,可以考虑使用该插件来进行处理,例如直接使用table来模拟表单的话,就可以使用该插件。
虽然是换汤不换药,本质的判断还是要自己来写,但是对比自己写的判断,可能会更加优雅一点?(⊙o⊙)?,而且可以实时 watch,对于想摆放一些错误提示上来也比较简单 (⊙o⊙)?,这是本人目前使用的体验,当然,如果你有更好的方法来处理这些复杂的表单,欢迎留言区评论指教,不胜感激