1.0.0 • Published 7 years ago
vux-validator v1.0.0
vux-validator
定制化服务vux某些表单的验证插件
立即使用
html
<group label-width="105px" label-align="left"> <popup-picker title="招聘渠道:" placeholder="点击选择" :data="list" v-model="value6" value-text-align="left" v-va='{model:"a",value:value6,text:"招聘渠道",type: "array"}'></popup-picker> <popup-picker title="人事范围:" placeholder="点击选择" :data="list" v-model="value5" value-text-align="left" v-va='{model:"b",value:value5,text:"人事范围",type: "array"}'></popup-picker> <popup-picker title="人事子范围:" placeholder="点击选择" :data="list" v-model="value4" value-text-align="left" v-va='{model:"c",value:value4,text:"a",type: "array"}'></popup-picker> </group>
js
methods: {
submit(){
if (this.$errorArr()) {
this.$vux.toast.text(this.$errorArr(), 'middle')
return false
}
// ---其他代码逻辑---
...
...
...
...
}
}
使用介绍
在需要使用表单验证的元素上使用vue指令
v-va="{model:'???',value:???,text:'???',type: '???',rule}"
v-va指令的Options 参数介绍
- model:需要验证的Model的标识,具有唯一性
- value:Model,需要验证的Model
- text:关键字
- type:array(一般为选择器的非空验证),text(单纯的字符串,默认非空判断)等
- rule:目前还没做,到时会有内部的正则验证,以及用户自定义reg正则检验
errorArr方法的介绍
一般来说移动端的表单验证会出现在点击提交按钮的时候,我们在点击提交按钮的时候,通过查看该实例的errorArr,如果有值,即将数组第一项用弹幕或者弹窗抛出,否则提交操作无法通过
//数组错误信息
Vue.prototype.$errorArr = function () {
let error = null
// 判断有没有error属性,有即拥有错误信息
for(let v of arr){
if (v.error) {
error = v.error
break
}
}
if (error) {
return error
} else {
return false
}
}
1.0.0
7 years ago