公司最近的項目有個添加動態表單的需求，總結一下我在表單驗證上遇到的一些坑。
如圖是功能的需求，這個功能挺好實現的，但是表單驗證真是耗費了我一些功夫。
vue+element在表單驗證上有一些限制，必須依照element示例的格式才能驗證通過。
附上代碼：
1 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
2 <div v-for="(domain, index) in dynamicValidateForm.list">
3 <el-form-item label="" style="margin-left: -70px">
4 <el-select v-model="dynamicValidateForm.list[index].organizer.positionId" @change="Positon($event)">
5 <el-option 6 v-for="item in positionList"
7 :key="item.id"
8 :label="item.name"
9 :value="item.id"
10 :disabled="item.disabled"
11 ></el-option>
12 </el-select>
13 </el-form-item>
14 <el-form-item style="margin-left: -29px"
15 label="人數"
16 :prop="'list.' + index + '.organizer.number'" 17 :rules="{required: true, message: '請輸入人數', trigger: 'blur'}">
18 <el-input v-model="domain.organizer.number" placeholder="人數"></el-input>
19 </el-form-item>
20 <el-form-item label="直屬下級" v-if="dynamicValidateForm.list[index].organizer.positionId!==1">
21 <el-select v-model="dynamicValidateForm.list[index].organizer.parentId">
22 <el-option 23 v-for="item in positionList"
24 :key="item.id"
25 :label="item.name"
26 :value="item.id"
27 ></el-option>
28 </el-select>
29 </el-form-item>
30 <span style="margin-left: 30px">任務</span>
31 <span v-for="(itm,i) in dynamicValidateForm.list[index].dutyId" :key="i">
32 <el-form-item label="" style="width: 100px;" id="ren"
33 :prop="'list.' + index + '.dutyId.'+i+'.dutyid'" 34 :rules="{required: true, message: '請選擇任務', trigger: 'change'}"
35 >
36 <el-select v-model="dynamicValidateForm.list[index].dutyId[i].dutyid">
37 <el-option 38 v-for="item in dutyList"
39 :key="item.id"
40 :label="item.name"
41 :value="item.id"
42 ></el-option>
43 </el-select>
44 </el-form-item>
45 </span>
46 <span class="add" @click="addWork(index)">增加任務+</span>
47 </div>
48 <p class="addLevel" @click="addLevel()">＋增加職位</p>
49 </el-form>
我加粗並且是紫色的地方需要着重注意。:prop和:rulues還有v-model里面的字段必須是一一對應的，不然會一直驗證不通過，這是驗證最關鍵的
我害怕驗證不通過，選擇在行內驗證
1 dynamicValidateForm:{ //必須將數組放到表單對象里，不然會報錯 2 list:[ 3 { 4 organizer: { 5 positionId:'', 6 parentId:'', 7 number:'', 8 }, 9 dutyId:[ 10 { 11 dutyid:'' 12 } 13 ] 14 } 15 ], 16 },
還有注意的一些驗證規則：
1 bus: [ 2 {required: true, message: '請填寫公交站點', trigger: 'blur'}, 3 { min: 1, max: 50, message: '50個字符以內', trigger: 'blur'} //這種驗證必須是內容必須是字符串才能通過，不然一直會提示50個字符以內 4 ],
//如果必須填寫數字，可以這樣改
bus: [
{required: true, message: '請填寫公交站點', trigger: 'blur'},
{pattern:/^\d{1,50}$/, message: '50個字符以內', trigger: 'blur'} //正則轉換成數字
],