標(biāo)題描述看起來有些復(fù)雜，有vue，Element，又有表單驗(yàn)證，還有v-for循環(huán)？是不是有點(diǎn)亂？不過我相信開發(fā)中遇到過此問題的同學(xué)，一看就明白我說的意思了。
首先Element組件有一套完善的表單驗(yàn)證方法，官方文檔寫的也很清楚：Element表單驗(yàn)證API，正常按照官方文檔添加rules規(guī)則，需要驗(yàn)證的表單項(xiàng)設(shè)置prop，然后提交表單時(shí)通過form的validate方法驗(yàn)證表單項(xiàng)就可以了。
然鵝問題來了，如果表單項(xiàng)里有通過v-for動(dòng)態(tài)生成的表單項(xiàng)，如何設(shè)置驗(yàn)證呢？這個(gè)官方文檔并沒有明確的說法，我們通過查找解決方案和實(shí)際驗(yàn)證，總結(jié)出來解決方法如下。
首先是添加rules規(guī)則，這個(gè)和正常添加規(guī)則一樣：
productGroupRules: {
productGroupNum: [{required:true, message:'請(qǐng)?zhí)顚懮唐窋?shù)量', trigger:'blur'`}],
productGroupPrice: [{required:true, message:'請(qǐng)?zhí)顚憙?yōu)惠價(jià)格', trigger:'blur'`}]
}
然后給表單項(xiàng)添加驗(yàn)證，以商品數(shù)量為例：
<el-form-item label="商品數(shù)量:":prop="'productGroup.'+index+'.num'":rules="productGroupRules.productGroupNum">
<el-input v-model="item.num"type="number"size="small" style="width:80px;"></el-input>
</el-form-item>
- 注意
這里:rules是每個(gè)表單項(xiàng)都要添加，有多個(gè)的話用productGroupRules.productGroupNum這樣的形式區(qū)分，對(duì)應(yīng)上面productGroupRules里的內(nèi)容。
另外主要就是:prop了，注意正常驗(yàn)證表單項(xiàng)是prop，而這里是:prop。
:prop="'productGroup.'+index+'.num'"是拼接的形式，前面是v-for綁定的數(shù)組，中間是數(shù)組索引index，最后是表單項(xiàng)綁定的v-model的名稱，然后用點(diǎn).把它們連接起來。這三項(xiàng)都必須保證正確，錯(cuò)一個(gè)都無法驗(yàn)證。
另外就是要注意，v-for綁定的數(shù)組也必須綁定在form對(duì)象里，注意上面的data里：
form: {
activityName: ''``,
status: '1'``,
productGroup: [{num:``""``,price:``""``}]
}
如果是：
form: {
activityName: ''``,
status: '1'
},
productGroup: [{num:``""``,price:``""``}]
是無法驗(yàn)證的，這一點(diǎn)也要注意。
好了，以上就是解決vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證的解決方案了，希望能幫助到遇到此問題的同學(xué)。
我自己的代碼：
<el-form
:inline="true"
ref="carBussInsureSinglenfoForm"
label-width="120px"
:model="carBusinessInsurance"
>
<el-row
v-for="(item,index) in this.carBusinessInsurance.businessInsuranceArray"
:key="index"
>
<el-col :span="3" :offset="1">
<el-checkbox
v-model="item.isSelected"
@change="insturanceSelecteAction(item)"
>{{item.insuranceName}}</el-checkbox>
</el-col>
<el-col :span="6">
<el-form-item class="deduction" label="是否有不計(jì)免賠">
<el-switch
v-model="item.isSelectedSwitch"
active-text="有"
inactive-text="無"
:disabled="!item.isSelected"
></el-switch>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
label="保費(fèi)金額"
:prop="'businessInsuranceArray.'+index+'.amount'"
:rules="carBusinessInsuranceRules.amount"
>
<el-input v-model="item.amount" placeholder :disabled="!item.isSelected"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
label="最高賠付金額"
:prop="'businessInsuranceArray.'+index+'.maxPayAmount'"
:rules="carBusinessInsuranceRules.maxPayAmount"
>
<el-input v-model="item.maxPayAmount" placeholder :disabled="!item.isSelected"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
data
carBusinessInsurance: {
businessInsuranceArray: []
},
rules
carBusinessInsuranceRules: {
amount: [
{
pattern: /^([1-9]\d*(\.\d[1-9]?|\.\d*0)?|0\.[1-9][1-9]?|0\.0[1-9]|0)$/,
message: "輸入項(xiàng)只能為大于或者等于0的數(shù)字，且最多保留兩位小數(shù)"
}
],
maxPayAmount: [
{
pattern: /^([1-9]\d*(\.\d[1-9]?|\.\d*0)?|0\.[1-9][1-9]?|0\.0[1-9]|0)$/,
message: "輸入項(xiàng)只能為大于或者等于0的數(shù)字，且最多保留兩位小數(shù)"
}
]
