Element 多个Form表单 同时验证

一、背景

在一个页面中需要实现两个Form表单,并在页面提交时需要对两个Form表单进行校验,两个表单都校验成功时才能提交

所用技术栈:Vue2+Element UI

二、实现效果

三、多个表单验证

注意项:

两个form表单,每个表单上都设置单独的model和ref,不能同时使用,否则每个表单上的校验提示会失效

javascript 复制代码
<template>
  <div>
    <!-- 表单一区域 -->
    <el-form :inline="true" :model="form1Mode" class="demo-form-inline" ref="form1Ref" :rules="form1Rules">
      <el-form-item label="表单一" prop="user">
        <el-input v-model="form1Mode.user" placeholder="form1"></el-input>
      </el-form-item>
    </el-form>
    <!-- 表单二区域 -->
    <el-form :inline="true" :model="form2Mode" class="demo-form-inline" ref="form2Ref" :rules="form2Rules">
      <el-form-item label="表单二" prop="user">
        <el-input v-model="form2Mode.user" placeholder="form2"></el-input>
      </el-form-item>
    </el-form>
    <!-- 按钮提交区域 -->
    <div>
      <el-button type="primary" @click="onSubmit">确定</el-button>
      <el-button>取消</el-button>
    </div>
  </div>
</template>

3.1、方式一:依次对两个表单进行校验

javascript 复制代码
<script>
export default {
  data() {
    return {
      form1Mode: {
        user: ''
      },
      form2Mode: {
        user: ''
      },
      form1Rules: {
        user: [{ required: true, message: '请输入form1', trigger: 'blur' }]
      },
      form2Rules: {
        user: [{ required: true, message: '请输入form2', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //确定按钮
    async onSubmit() {
      try {
        await this.$refs.form1Ref.validate()
        console.log('表单1校验通过')
        await this.$refs.form2Ref.validate()
        console.log('表单2校验通过')
        //都校验成功之后,这里可以发请求
        this.$message.success('表单校验成功')
      } catch (error) {
        console.error('表单校验失败', error)
      }
    }
  }
}
</script>

3.2、方式二:两个表单同时校验------使用Promise.all

javascript 复制代码
<script>
export default {
  data() {
    return {
      form1Mode: {
        user: ''
      },
      form2Mode: {
        user: ''
      },
      form1Rules: {
        user: [{ required: true, message: '请输入form1', trigger: 'blur' }]
      },
      form2Rules: {
        user: [{ required: true, message: '请输入form2', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //封装验证函数
    submitForm(formUser) {
      return new Promise((resolve, reject) => {
        this.$refs[formUser].validate((valid) => {
          if (valid) {
            resolve()
          } else {
            reject(new Error('错误'))
          }
        })
      })
    },
    //确定按钮
    onSubmit() {
      Promise.all([this.submitForm('form1Ref'), this.submitForm('form2Ref')])
        .then(() => {
          //验证成功后在此处发请求
          this.$message.success('验证通过')
        })
        .catch(() => {
          this.$message.error('验证失败')
        })
    }
  }
}
</script>
相关推荐
前端小巷子2 分钟前
Webpack 5模块联邦
前端·javascript·面试
晓得迷路了6 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆12 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆17 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动10 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏11 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数11 小时前
掌握JavaScript函数封装与作用域
前端·javascript