表单深层嵌套数组如何做动态验证

前言

相信前端小伙伴们都用过element-ui做过这样的效果， 在表单中数据有循环嵌套，并且是动态添加表单项时，用过官方的例子-动态增减表单项，来做动态验证, 比如：

form表单绑定的数据是

form:{
    name:'水果',
    goods:[
        {name:'西瓜',num:20},
        {name:'苹果',num:23}
    ]
}

为了验证goods的子项name和num会用以下方法

把rules直接写在el-form-item标签里面，同时注意prop的写法，格式为 数组名+下标+校验的字段 例子如：

 <div v-for="(item, index) in form.goods" :key="index">
            <el-row>
              <el-col :span="12">
                <el-form-item 
                 label="水果名"
                :prop="'goods.'+index+'.name'"
                :rules="{required: true, message:'请输入水果名', trigger: 'blur'}"
                >
                  <el-input v-model="item.name"  placeholder="水果名" maxlength="30" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item 
                  label="数量"
                  :prop="'goods.'+index+'.num'"
                  :rules="{required: true, message:'请输入数量', trigger: 'blur'}"
                >
                  <el-input v-model="item.num" placeholder="请输入数量" maxlength="10" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

如果prop的格式没写对，也许还碰到过报错
[Vue warn]: Error in mounted hook: "Error: please transfer a valid prop path to form item!"

再熟悉下demo中prop的写法
:prop="'goods.'+index+'.name'"

数组名-goods+下标-index+校验的字段-name

表单升级

假如我们对表单的数据进行嵌套升级，当前form表单绑定的数据是

form{
    name:'水果',
    goods:[
        {
            name:'西瓜',
            num:20,
            category:[
              {
                label:'8424',
                desc:'不要888，只要2块8',
              },
              {
                label:'麒麟瓜',
                desc:'不要888，只要2块8',
              }
               ]
        },
        {
            name:'苹果',
            num:23，
            category:[
              {
                label:'红富士',
                desc:'不要999，只要3块9',
              },    
              ]
        }
    ]
}

现在我们不仅要验证goods的子项name和num，还要验证下一级category中的label和desc，我们又该如何写prop的格式呢，看一看例子：

 <div v-for="(item, index) in form.goods" :key="item.name">
            <el-row>
              <el-col :span="12">
                <el-form-item 
                 label="水果名"
                :prop="'goods.'+index+'.name'"
                :rules="{required: true, message:'请输入水果名', trigger: 'blur'}"
                >
                  <el-input v-model="item.name"  placeholder="水果名" maxlength="30" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数量"
                              :prop="'goods.'+index+'.num'"
                              :rules="{required: true, message:'请输入数量', trigger: 'blur'}"
                >
                  <el-input v-model="item.num" placeholder="请输入数量" maxlength="10" />
                </el-form-item>
              </el-col>
            </el-row>
          <el-row   v-for="(cate, index2) in item.category" :key="'cate'+index2">
            <el-col :span="12">
              <el-form-item 
                  label="品种"   
                  :prop="'goods.'+index+'.category.'+index2+'.label'"
                  :rules="{required: true, message:'请输入品种', trigger: 'blur'}">
                <el-input v-model="cate.label" placeholder="品种" maxlength="30" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item 
              label="备注" 
              :prop="'goods.'+index+'.category.'+index2+'.desc'"
              :rules="{required: true, message:'请输入备注', trigger: 'blur'}">
                <el-input v-model="cate.desc" placeholder="请输入备注" maxlength="30" />
              </el-form-item>
            </el-col>
         </el-row>
          </div>

聪明的你细看就会发现出规律，在 :prop="'goods.'+index+'.category.'+index2+'.label'" prop中，goods是form表单的一级数组，而category是goods的下一级数组， 表单二级动态数组验证的prop的写法格式总结为：

一级数组名+一级下标+二级数组名+二级下标+校验的字段

体验

代码演示

复杂交互

掌握以上基本原则，做复杂交互验证就会游刃有余，以下就是我做的稍微复杂的验证效果

学会了以上方法，又可以准时下班啦，赶紧收藏用起来。