v-vld
v0.1.2
Published
## 安装使用
Downloads
2
Readme
v-vld
安装使用
npm i v-vld -S
import Vld from 'v-vld'
Vue.use(Vld)
基础使用方法
<input
v-vld="'required'"
name="test"
scope="myScoped"
v-model="waitForValidate"
/>
<div id="show-error">{{ errList['test'] }}</div>
v-vld
指定校验方式,可以是变量,例子中的'required'
意味着该字段必填name
用于展示错误提示,如${name}必填
,另外,也可以用于输入框定位(这个放在后面说)scope
规定校验范围,可不指定{{ errList['test'] }}
显示错误提示,需要传入 name
正确配置后,在输入框数据变动时会自动校验输入框内数据是否符合要求。
自定义校验
在使用自定义校验前,先通过 Vld.extend
拓展校验方法。
Vld.extend(
'lt999',
(v) => Number(v) < 999,
(field) => field + '需小于 999'
)
Vld.extend
需要按顺序传入:
- 校验名称
- 校验函数
- 对应错误提示
如上例自定义 lteX
即可在组件中使用:
<el-input name="y" v-vld="'lt999'" v-model="y"></el-input>
<div id="show-error">{{ errList['y'] }}</div>
联动校验
Vld.extend(
'lteX',
(v, x) => Number(v) <= Number(x),
(field) => field + '不能大于 x'
)
传入校验函数的第二个参数是一个在 v-vld
传入的参数值。
举个例子:传入 'lteX:999'
,校验函数就会在第二个参数收到 '999'
(也就是冒号分割后的后者)。
既然 v-vld
传入的是变量,那就 :
后的值就当然不只能是固定的值:
<el-input name="y" v-vld="'lteX:' + x" v-model="y"></el-input>
<div id="show-error">{{ errList['y'] }}</div>
你可以在冒号后传入变量 x,在 x 更新后,'lteX:' + x
也会跟着改变,这样就实现了联动校验的效果。
总体校验
在提交前往往需要校验整个表格是否按要求填好,这就需要使用校验函数 $vld
。
this.$vld()
如果你需要校验指定 scope 的话,向 $vld
函数传入 scope 即可:
this.$vld(scope)
$vld
函数返回的校验结果会像这样:
[
{
"field": "test",
"msg": "test不能为空"
},
{
"field": "el-test",
"msg": "el-test不能为空"
},
{
"field": "el-test2",
"msg": "el-test不能为空"
},
{
"field": "test2",
"msg": "test不能为空"
}
]
你可以利用 field
定位目标输入框:
document.querySelector(`[name="${field}"]`).scrollIntoView()
清除校验
同样可以传入 scope:
this.$vldClr()
this.$vldClr(scope)
不同作用域校验
在当前上下文(指组件实例)内不能校验其他上下文中的 field,你需要通过 $parent
、$children
、$refs
等方法获取其他上下文并校验:
<InputGroup ref="inputGroup" />
<script>
this.$refs.inputGroup.$vld()
</script>