Vue+Element-UI 多個form表單驗證

在開發的過程中   有時根據業務需求提交的表單內容分區分塊  內容繁多 業務控制相對復雜的時候  我們應該將頁面內容分成若干個組件  這樣方便后期維護查找問題  不然時間長了后期維護找問題頭都大了

如上圖所示  頁面表單分為基本設置，上架設置，更多設置3大塊  分別將3大塊寫到3個組件（A,B,C） 提交表單的時候我們要進行表單驗證

思路：利用ES6 Promise異步控制

代碼如下

 

 

 

組件A 
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="套卡名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

 

組件B
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="上架范圍" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

組件C
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="開票" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

 

 

 

HTML代碼如下

<template>
  <div class="product-card-page">
    <!-- basic -->
    <basic
      ref="basic"
      :data="basicInfo"
      :disabled="disabled"
      @deductAmountTypeChange="deductAmountTypeChange" />
    <!-- onshelf -->
    <on-shelf
      ref="onshelf"
      :discount="discount"
      :data="onshelfInfo"
      :tag="tags"
      :disabled="disabled" />
    <!-- more -->
    <more
      ref="more"
      :data="moreInfo"
      :disabled="disabled" />
    <!-- submit -->
    <div
      v-show="!disabled"
      class="btns_row tc mt60 mb50">
      <el-button
        round
        size="mini"
        style="width:78px;"
        @click="$router.push('/product/card')">
        取消
      </el-button>
      <el-button
        round
        type="primary"
        size="mini"
        style="width:78px;"
        @click="submit">
        保存
      </el-button>
    </div>
  </div>
</template>

 

JS代碼如下：

import OnShelf from './components/OnShelf'

import Basic from './components/Basic'

import More from './components/More'

submit(){

const p1= new Promise((resolve,reject)=> {

this.$refs['basic'].$refs['ruleForm'].validate(valid=>{ if(valid) resolve() }) }) const p2=new Promise((resolve,reject)=>{ this.$refs['onshelf'].$refs['ruleForm'].validate(valid=>{ if(valid) resolve() }) }) const p3=new Promise((resolve,reject)=>{ this.$refs['more'].$refs['ruleForm'].validate(valid=>{ if(valid) resolve() }) }) Promise.all([p1,p2,p3]).then(()=>{ console.log('驗證通過,提交表單') })
}

歡迎大家學習討論更好的方法