vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法

標(biāo)題描述看起來(lái)有些復(fù)雜，有vue，Element，又有表單驗(yàn)證，還有v-for循環(huán)？是不是有點(diǎn)亂？不過(guò)我相信開(kāi)發(fā)中遇到過(guò)此問(wèn)題的同學(xué)，一看就明白我說(shuō)的意思了。

成都創(chuàng)新互聯(lián)公司是專(zhuān)業(yè)的鳳縣網(wǎng)站建設(shè)公司，鳳縣接單;提供做網(wǎng)站、成都網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行鳳縣網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

首先Element組件有一套完善的表單驗(yàn)證方法，官方文檔寫(xiě)的也很清楚：Element表單驗(yàn)證API，正常按照官方文檔添加rules規(guī)則，需要驗(yàn)證的表單項(xiàng)設(shè)置prop，然后提交表單時(shí)通過(guò)form的validate方法驗(yàn)證表單項(xiàng)就可以了。

然鵝問(wèn)題來(lái)了，如果表單項(xiàng)里有通過(guò)v-for動(dòng)態(tài)生成的表單項(xiàng)，如何設(shè)置驗(yàn)證呢？這個(gè)官方文檔并沒(méi)有明確的說(shuō)法，我們通過(guò)查找解決方案和實(shí)際驗(yàn)證，總結(jié)出來(lái)解決方法如下。

首先是循環(huán)表單項(xiàng)沒(méi)有加驗(yàn)證之前的代碼：

<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="套餐名稱(chēng)：" 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="狀態(tài)：">
      <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" >
     <div class="sub-title">梯度設(shè)置：</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="商品數(shù)量:">
         <el-input v-model="item.num" type="number" size="small" ></el-input>
        </el-form-item>
       </el-col>
       <el-col :span="6">
        <el-form-item label="優(yōu)惠價(jià)格:">
          <el-input v-model="item.price" type="number" size="small" ></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: '請(qǐng)輸入套餐名稱(chēng)', 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("驗(yàn)證不通過(guò)");
    }
   });
  },
  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規(guī)則，這個(gè)和正常添加規(guī)則一樣：

productGroupRules: {
 productGroupNum: [{required: true, message: '請(qǐng)?zhí)顚?xiě)商品數(shù)量', trigger: 'blur'}],
 productGroupPrice: [{required: true, message: '請(qǐng)?zhí)顚?xiě)優(yōu)惠價(jià)格', trigger: 'blur'}]
}

然后給表單項(xiàng)添加驗(yàn)證，以商品數(shù)量為例：

<el-form-item label="商品數(shù)量:" :prop="'productGroup.'+index+'.num'" :rules="productGroupRules.productGroupNum">
 <el-input v-model="item.num" type="number" size="small" ></el-input>
</el-form-item>

注意這里:rules是每個(gè)表單項(xiàng)都要添加，有多個(gè)的話用productGroupRules.productGroupNum這樣的形式區(qū)分，對(duì)應(yīng)上面productGroupRules里的內(nèi)容。

另外主要就是:prop了，注意正常驗(yàn)證表單項(xiàng)是prop，而這里是:prop。
:prop="'productGroup.'+index+'.num'"是拼接的形式，前面是v-for綁定的數(shù)組，中間是數(shù)組索引index，最后是表單項(xiàng)綁定的v-model的名稱(chēng)，然后用點(diǎn).把它們連接起來(lái)。這三項(xiàng)都必須保證正確，錯(cuò)一個(gè)都無(wú)法驗(yàn)證。

另外就是要注意，v-for綁定的數(shù)組也必須綁定在form對(duì)象里，注意上面的data里：

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

form: {
 activityName: '',
 status: '1'
},
productGroup: [{num:"",price:""}]

是無(wú)法驗(yàn)證的，這一點(diǎn)也要注意。

好了，以上就是解決vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證的解決方案了，希望能幫助到遇到此問(wèn)題的同學(xué)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞名稱(chēng)：vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法
路徑分享：http://aaarwkj.com/article16/peiddg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、定制網(wǎng)站、網(wǎng)站制作、網(wǎng)站收錄、網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法