Vue+Element-UI 多个form表单验证

最新推荐文章于 2024-08-13 16:14:03 发布

shidouyu

最新推荐文章于 2024-08-13 16:14:03 发布

阅读量2.7k

点赞数 2

分类专栏： Vue 文章标签： vue.js node.js typescript es6

原文链接：https://www.cnblogs.com/junechen/p/11005324.html

版权

Vue 专栏收录该内容

36 篇文章 7 订阅

订阅专栏

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('验证通过,提交表单') 
    
})
}

复制代码

欢迎大家学习讨论更好的方法