這篇文章主要介紹了vue使用Element元件時v-for循環裡的表單項目驗證方法，內容挺不錯的，現在分享給大家，也給大家做個參考。
標題描述看起來有點複雜，有vue，Element，又有表單驗證，還有v-for循環？是不是有點亂？不過我相信開發中遇到此問題的同學，一看就明白我說的意思了。
首先Element元件有一套完善的表單驗證方法，官方文件寫的也很清楚：Element表單驗證API，正常依照官方文件新增rules規則，需要驗證的表單項目設定prop，然後提交表單時透過form的validate方法驗證表單項目就可以了。
然鵝問題來了，如果表單項目裡有透過v-for動態產生的表單項，如何設定驗證呢？這個官方文件並沒有明確的說法，我們透過尋找解決方案和實際驗證，總結出來解決方法如下。
首先是循環表單項目沒有加驗證之前的程式碼：
<template>
<p 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;">
<p class="sub-title">梯度设置：</p>
</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="p-submit">
<el-button @click="resetForm('form')">取消</el-button>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form-item>
</el-form>
</p>
</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循環裡的表單項目驗證的解決方案了，希望能幫助到遇到此問題的同學。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
如何使用vue的transition完成滑動過渡
#關於vue和vue-validator 表單驗證功能的實作
以上是關於vue使用Element元件時v-for迴圈裡的表單項目驗證的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
