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

标题描述看起来有些复杂，有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>&nbsp;&nbsp;
        <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循环里的表单项验证的解决方案了，希望能帮助到遇到此问题的同学。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。