標題描述看起來有些復雜，有vue，Element，又有表單驗證，還有v-for循環？是不是有點亂？不過我相信開發中遇到過此問題的同學，一看就明白我說的意思了。
首先Element組件有一套完善的表單驗證方法，官方文檔寫的也很清楚：Element表單驗證API，正常按照官方文檔添加rules規則，需要驗證的表單項設置prop，然后提交表單時通過form的validate方法驗證表單項就可以了。
然鵝問題來了，如果表單項里有通過v-for動態生成的表單項，如何設置驗證呢？這個官方文檔并沒有明確的說法，我們通過查找解決方案和實際驗證，總結出來解決方法如下。
首先是循環表單項沒有加驗證之前的代碼：
<template> <div class="content-body"> <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-row :gutter="10"> <el-col :span="12" :offset="0"> <el-form-item label="套餐名稱：" prop="activityName" id="activityName"> <el-input v-model="form.activityName"></el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="10"> <el-col :span="12"> <el-form-item label="狀態："> <el-radio v-model="form.status" label="1">上線</el-radio> <el-radio v-model="form.status" label="0">下線</el-radio> </el-form-item> </el-col> </el-row> <el-row :gutter="10"> <el-col :span="2" style="width:120px;"> <div class="sub-title">梯度設置：</div> </el-col> <el-col :span="20"> <el-row :gutter="10" v-for="(item,index) in form.productGroup" :key="index"> <el-col :span="6"> <el-form-item label="商品數量:"> <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="優惠價格:"> <el-input v-model="item.price" type="number" size="small" style="width:80px;"></el-input> </el-form-item> </el-col> <el-col :span="4"> <i class="el-icon-remove-outline" @click="deleteLadder(index)"></i> <i class="el-icon-circle-plus-outline" @click="addLadder" v-if="index==0"></i> </el-col> </el-row> </el-col> </el-row> <el-form-item size="medium" class="div-submit"> <el-button @click="resetForm('form')">取消</el-button> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> </div></template><script>/* eslint-disable */export default { data() { return { form: { activityName: '', status: '1', productGroup: [{num:"",price:""}] }, rules: { activityName: [ { required: true, message: '請輸入套餐名稱', trigger: 'blur' } ] } } }, methods: { deleteLadder(index) { if(this.form.productGroup.length>1){ this.form.productGroup.splice(index,1); } }, addLadder() { this.form.productGroup.push({num:"",price:""}); }, submitForm(formName) { console.log("activityName...",this.form.activityName); this.$refs[formName].validate((valid,obj) => { if (valid) { this.submitFormAction(); } else { this.$message.error("驗證不通過"); } }); }, submitFormAction() { this.$message.success("提交成功"); }, resetForm(formName) { this.$refs[formName].resetFields(); this.form.productGroup = [{num:"",price:""}]; } }}</script><style>.el-form-item { margin-bottom: 20px;}</style>首先是添加rules規則，這個和正常添加規則一樣：
productGroupRules: { productGroupNum: [{required: true, message: '請填寫商品數量', trigger: 'blur'}], productGroupPrice: [{required: true, message: '請填寫優惠價格', trigger: 'blur'}]}然后給表單項添加驗證，以商品數量為例：
<el-form-item label="商品數量:" :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是每個表單項都要添加，有多個的話用productGroupRules.productGroupNum這樣的形式區分，對應上面productGroupRules里的內容。
另外主要就是:prop了，注意正常驗證表單項是prop，而這里是:prop。:prop="'productGroup.'+index+'.num'"是拼接的形式，前面是v-for綁定的數組，中間是數組索引index，最后是表單項綁定的v-model的名稱，然后用點.把它們連接起來。這三項都必須保證正確，錯一個都無法驗證。
另外就是要注意，v-for綁定的數組也必須綁定在form對象里，注意上面的data里：
form: { activityName: '', status: '1', productGroup: [{num:"",price:""}]}如果是：form: { activityName: '', status: '1'},productGroup: [{num:"",price:""}]是無法驗證的，這一點也要注意。
好了，以上就是解決vue使用Element組件時v-for循環里的表單項驗證的解決方案了，希望能幫助到遇到此問題的同學。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
