Vue + Element-UI form validation form a plurality

In the development process, sometimes based on form content business requirements submitted by the partition block content range of service control relatively complex when we should be content of the page is divided into several components so easy to post-maintenance look for problems or else a long time later maintenance to find the problem have a big head the

As shown in FIG page form into basic setting, setting shelves, provided more chunks 3 3 respectively when the chunk is written to three components (A, B, C) we want to submit the form of Form Validation

Ideas: the use of asynchronous control ES6 Promise

code show as below

 

 

 

组件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 code as follows

<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')">
        cancel
      </el-button>
      <el-button
        round
        type="primary"
        size="mini"
        style="width:78px;"
        @click="submit">
        Storage
      </el-button>
    </div>
  </div>
</template>

 

JS code is as follows:

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(()=>{
   the console.log ( 'verified, the form is submitted' )
    
})
}

Welcome to discuss better ways to learn