首頁 > web前端 > js教程 > 主體

關於vue使用Element元件時v-for迴圈裡的表單項目驗證的方法

不言
發布: 2018-06-29 11:17:50
原創
3425 人瀏覽過

這篇文章主要介紹了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(&#39;form&#39;)">取消</el-button>
    <el-button type="primary" @click="submitForm(&#39;form&#39;)">提交</el-button>
   </el-form-item>
  </el-form>
 </p>
</template>
<script>
/* eslint-disable */
export default {
 data() {
  return {
   form: {
    activityName: &#39;&#39;,
    status: &#39;1&#39;,
    productGroup: [{num:"",price:""}]
   },
   rules: {
    activityName: [
     { required: true, message: &#39;请输入套餐名称&#39;, trigger: &#39;blur&#39; }
    ]
   }
  }
 },
 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: &#39;请填写商品数量&#39;, trigger: &#39;blur&#39;}],
 productGroupPrice: [{required: true, message: &#39;请填写优惠价格&#39;, trigger: &#39;blur&#39;}]
}
登入後複製

然後給表單項目新增驗證,以商品數量為例:

<el-form-item label="商品数量:" :prop="&#39;productGroup.&#39;+index+&#39;.num&#39;" :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: &#39;&#39;,
 status: &#39;1&#39;,
 productGroup: [{num:"",price:""}]
}
如果是:

form: {
 activityName: &#39;&#39;,
 status: &#39;1&#39;
},
productGroup: [{num:"",price:""}]
登入後複製

是無法驗證的,這一點也要注意。

好了,以上就是解決vue使用Element元件時v-for循環裡的表單項目驗證的解決方案了,希望能幫助到遇到此問題的同學。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

如何使用vue的transition完成滑動過渡

#關於vue和vue-validator 表單驗證功能的實作

以上是關於vue使用Element元件時v-for迴圈裡的表單項目驗證的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板