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

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

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

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

<el-form
  ref="formRef"
  label-width="100px"
  :model="formData"
  :rules="formRules"
  size="medium"
>
  <el-row>
    <div style="width: 100%; text-align: center; background: #ababab">
      <h2 style="font-size: 14px">采购计划（数量，单价）设置</h2>
    </div>
  </el-row>
  <el-row style="margin: 0px 0px 20px 0px; background: #f7f7f7">
    <el-col :span="8" style="width: 100%; text-align: center">
      采购计划名称
    </el-col>
    <el-col :span="8" style="width: 100%; text-align: center">
      采购数量
    </el-col>
    <el-col :span="8" style="width: 100%; text-align: center">
      采购单价（元）
    </el-col>
  </el-row>

  <el-row v-for="(item,index) in formData.list" :key="item.plan_id">
    <el-col :span="0" style="width: 100%; text-align: center">
      {{ item.plan_id }}
    </el-col>

    <el-col :span="8" style="width: 100%; text-align: center">
      {{ item.plan_name }}
    </el-col>

    <el-col :span="8" style="width: 100%; text-align: center">
      <el-form-item label="" :prop="'list.' + index + '.assets_amount'" :rules="formRules.assets_amount">
        <el-input
          v-model="item.assets_amount"
          :maxlength="8"
          placeholder=""
          :show-word-limit="true"
          type="number"
        />
      </el-form-item>
    </el-col>

    <el-col :span="8" style="width: 100%; text-align: center">
      <el-form-item label="" :prop="'list.' + index + '.assets_price'" :rules="formRules.assets_price">
        <el-input
          v-model="item.assets_price"
          :maxlength="8"
          placeholder=""
          :show-word-limit="true"
          type="number"
        />
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

 

 

 首先是添加rules规则，这个和正常添加规则一样：

formRules:{
  manager_user_name: [{ required: true, message: '负责人不能为空', trigger: 'change' },],
  supplier_name: [{ required: true, message: '供应商不能为空', trigger: 'change' },],
  project_name: [{ required: true, message: '项目名称不能为空', trigger: 'blur' },],
  project_no: [{ required: true, message: '项目编码不能为空', trigger: 'blur' },],
  setup_time: [{ required: true, message: '立项日期不能为空', trigger: 'blur' },],
  begin_time: [{ required: true, message: '开始执行日期不能为空', trigger: 'blur' },],
  assets_amount: [{ required: true, message: '数量不能为空', trigger: 'blur' },],
  assets_price: [{ required: true, message: '价格不能为空', trigger: 'blur' },],
},
然后给表单项添加验证，以商品数量为例：

 

 

注意这里:rules是每个表单项都要添加，有多个的话用productGroupRules.productGroupNum这样的形式区分，对应上面productGroupRules里的内容。

另外主要就是:prop了，注意正常验证表单项是prop，而这里是:prop。
:prop="'productGroup.'+index+'.num'"是拼接的形式，前面是v-for绑定的数组，中间是数组索引index，最后是表单项绑定的v-model的名称，然后用点.把它们连接起来。这三项都必须保证正确，错一个都无法验证。

 

另外就是要注意，v-for绑定的数组也必须绑定在form对象里，注意上面的data里