vue+element 动态表单验证

公司最近的项目有个添加动态表单的需求，总结一下我在表单验证上遇到的一些坑。

如图是功能的需求，这个功能挺好实现的，但是表单验证真是耗费了我一些功夫。

vue+element在表单验证上有一些限制，必须依照element示例的格式才能验证通过。

附上代码：

 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <div v-for="(domain, index) in dynamicValidateForm.list">
              <el-form-item label="" style="margin-left: -70px">
                <el-select v-model="dynamicValidateForm.list[index].organizer.positionId" @change="Positon($event)">
                  <el-option
                    v-for="item in positionList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin-left: -29px"
                            label="人数"
                            :prop="'list.' + index + '.organizer.number'"
17                            :rules="{required: true, message: '请输入人数', trigger: 'blur'}">
                <el-input v-model="domain.organizer.number" placeholder="人数"></el-input>
              </el-form-item>
              <el-form-item label="直属下级"  v-if="dynamicValidateForm.list[index].organizer.positionId!==1">
                <el-select v-model="dynamicValidateForm.list[index].organizer.parentId">
                  <el-option
                    v-for="item in positionList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <span style="margin-left: 30px">任务</span>
              <span  v-for="(itm,i) in dynamicValidateForm.list[index].dutyId" :key="i">
                   <el-form-item label="" style="width: 100px;" id="ren"
                                 :prop="'list.' + index + '.dutyId.'+i+'.dutyid'"
34                                 :rules="{required: true, message: '请选择任务', trigger: 'change'}"
                   >
                <el-select v-model="dynamicValidateForm.list[index].dutyId[i].dutyid">
                  <el-option
                    v-for="item in dutyList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                   </el-form-item>
              </span>
              <span class="add" @click="addWork(index)">增加任务+</span>
            </div>
            <p class="addLevel" @click="addLevel()">＋增加职位</p>
          </el-form>

我加粗并且是紫色的地方需要着重注意。:prop和:rulues还有v-model里面的字段必须是一一对应的，不然会一直验证不通过，这是验证最关键的

我害怕验证不通过，选择在行内验证

  dynamicValidateForm:{         //必须将数组放到表单对象里，不然会报错
           list:[
             {
               organizer: {
                 positionId:'',
                 parentId:'',
                 number:'',
               },
               dutyId:[
                 {
                   dutyid:''
                 }
               ]
             }
           ],
         },

还有注意的一些验证规则：

  bus: [
             {required: true, message: '请填写公交站点', trigger: 'blur'},
             { min: 1, max: 50, message: '50个字符以内', trigger: 'blur'}     //这种验证必须是内容必须是字符串才能通过，不然一直会提示50个字符以内
           ],

//如果必须填写数字，可以这样改

bus: [
  {required: true, message: '请填写公交站点', trigger: 'blur'},

 {pattern:/^\d{1,50}$/, message: '50个字符以内', trigger: 'blur'}  //正则转换成数字

],