关于vue使用Element组件时v-for循环里的表单项验证的方法

这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法，内容挺不错的，现在分享给大家，也给大家做个参考。

 

标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。

首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。

然鹅问题来了，如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？这个官方文档并没有明确的说法，我们通过查找解决方案和实际验证，总结出来解决方法如下。

首先是循环表单项没有加验证之前的代码：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

<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规则，这个和正常添加规则一样：

 

1 2 3 4

productGroupRules: {  productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}],  productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}] }

 

然后给表单项添加验证，以商品数量为例：

 

1 2 3

<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里：

 

1 2 3 4 5 6 7 8 9 10 11 12

form: {  activityName: '',  status: '1',  productGroup: [{num:"",price:""}] } 如果是：   form: {  activityName: '',  status: '1' }, productGroup: [{num:"",price:""}]

 

是无法验证的，这一点也要注意。