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里