前言
- 在项目中总遇到重复利用的情况，尤其在UI框架、功能模板
- 而在利用 Element ui 表单时；还有自带校验功能，校验分为原框架自带的校验规则、自己自定义的校验规则
- 下面就说一下，普通校验和动态表单的检验方案
普通的校验
个体校验
- model
- prop
- rules
- 必带以上三种属性
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{
required: true, message: '请输入邮箱地址', trigger: 'blur' },
{
type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
</el-form>
集体校验
- model
- prop
- rules
- 必带以上三种属性，但是 rules 校验规则是写在一起，格式：[ name : rules ，name : rules …]
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="rus"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
</el-form>
data(){
return {
rus:{
email : [
{
required: true, message: '请输入邮箱地址', trigger: 'blur' },
{
type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]
}
}
}
动态校验
- model
- prop
- rules
- 还是以上三个属性，但在 Prop 上有所不同，因校验原理在于，校验规则知道比较哪些值，而动态校验上，值是获取了，但是在动态表单上；校验规则匹配不上哪个需校验对象，从而在首次校验上会出现校验失效的情况。
- 解决办法是给 prop 加上指定值的规则而不再是原先的固定 name 了，如 ：‘数组**.’ + index + '.**value’
<template v-for="(fm,i) in data.list">
<el-form-item
:label="fm.nm + '：'"
:key="i"
:label-width=" textVal(fm.nm) +'px'"
:prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []"
>
</el-form-item>
</template>
集合校验
interviewRules:{
va:[{
required: true, message: '请选择职位', trigger: 'change'}]
},
打算做个通用的 form 表单组件，让我们用 Json 字段控制表单显示，附带个插件地址：
https://www.npmjs.com/package/tooua
如有不全之处，有请留言指教哈。