vue -- elementUI -- 表单动态验证笔记

 

 

 

表单中有如下配置项，阶梯条件可以动态增加，这里涉及到的验证问题:

 

Element ui 表单验证

普通校验(model、rules、ref)

个体校验：单独为每个item写rules

<el-form-item
   prop="email" label="邮箱"
    :rules="[
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
	>
    <el-input v-model="email"></el-input>
</el-form-item>

集体校验：统一在某个位置写rules

airdropRules: {
                // 基本信息校验
                actTitle: [ { required: true, message: "请输入标题", trigger: "blur" } ],
                tokenId: [ { required: true, message: "请选择活动id", trigger: "change" } ],
      },

动态校验

• 还是以上三个属性，但在 Prop 上有所不同，因校验原理在于，校验规则知道比较哪些值，而动态校验上，值是获取了，但是在动态表单上；校验规则匹配不上哪个需校验对象，从而在首次校验上会出现校验失效的情况。
• 解决办法是给 prop 加上指定值的规则而不再是原先的固定 name 了，如 ：‘数组**.’ + index + '.**value’

<div v-for="(item, index) in airdropForm.ladderList" :key=index>
    <el-form-item class="formTitle" :label="`阶梯${index+1}`"/>
    <el-form-item label="可用余额数量"
        :prop="`ladderList.` + index + '.holdBalance'"
        :rules="[ { required: true, message: '请设置可用余额数量', trigger: 'blur' } ],"
        >
        <el-input v-model="item.holdBalance" clearable></el-input>
    </el-form-item>
</div>

 

 

 

有一篇写的很全的校验文章：
https://www.cnblogs.com/qdlhj/p/12332407.html
https://www.jb51.net/article/159108.htm