Element 多个Form表单 同时验证

一、背景

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

所用技术栈:Vue2+Element UI

二、实现效果

三、多个表单验证

注意项:

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

<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、方式一:依次对两个表单进行校验

<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

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/124502.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

R语言与作物模型(以DSSAT模型为例)融合应用

随着基于过程的作物生长模型&#xff08;Process-based Crop Growth Simulation Model&#xff09;的发展&#xff0c;R语言在作物生长模型和数据分析、挖掘和可视化中发挥着越来越重要的作用。想要成为一名优秀的作物模型使用者与科研团队不可或缺的人才&#xff0c;除了掌握对…

秒级启动的集成测试框架

本文介绍了一种秒级启动的集成测试框架&#xff0c;使用该框架可以方便的修改和完善测试用例&#xff0c;使得测试用例成为测试过程的产物。 背景 传统的单元测试&#xff0c;测试的范围往往非常有限&#xff0c;常常覆盖的是一些工具类、静态方法或者较为底层纯粹的类实现&…

PostMan 之 Mock 接口测试

在测试的时候经常会碰到后端开发工程师的接口还没有开发完成&#xff0c;但是测试任务已经分配过来。没有接口怎么测试呢&#xff1f; 测试人员可以通过 mock server 自己去造一个接口来访问。mock server 可用于模拟真实的接口。收到请求时&#xff0c;它会根据配置返回对应的…

桶装水送水多门店水票押金押桶小程序开发

桶装水送水多门店水票押金押桶小程序开发 用户注册和登录首页展示各门店的桶装水品牌和价格用户可以选择门店和水品牌&#xff0c;并下单购买桶装水用户可以选择送水时间和地址用户可以查看自己的订单历史和当前订单状态用户可以申请退款或修改订单信息门店可以登录后台管理系…

ORACLE运行的数据库突然连接报“无监听程序”

远程&#xff1a;用远程的数据库连接工具用localhost可以连接&#xff0c;用ip地址除127.0.0.1不可连接。 可能是日志文件满了&#xff0c;解决办法如下&#xff1a; 第一步&#xff1a;关闭数据库监听程序【任务管理器--》服务--》右键停止服务】 第二步&#xff1a;找到日志…

AR眼镜安卓主板,智能眼镜光机方案定制

AR智能眼镜是一项涉及广泛技术的创新产品&#xff0c;它需要考虑到光学、显示、功耗、散热、延迟、重量以及佩戴人体工学等多个方面的因素&#xff0c;每一个项目都是技术进步所需攻克的难题。 在本文中&#xff0c;我们将重点讨论AR眼镜的主板和光学方案。 首先是AR智能眼镜的…

【C++的OpenCV】第十四课-OpenCV基础强化(二):访问单通道Mat中的值之at()、ptr()、iscontinuous()

&#x1f389;&#x1f389;&#x1f389; 欢 迎 各 位 来 到 小 白 p i a o 的 学 习 空 间 &#xff01; \color{red}{欢迎各位来到小白piao的学习空间&#xff01;} 欢迎各位来到小白piao的学习空间&#xff01;&#x1f389;&#x1f389;&#x1f389; &#x1f496;&…

Netty复习:(2)IdleStateHandler的用法

一、handler定义&#xff1a; package handler;import io.netty.channel.ChannelHandlerContext; import io.netty.channel.ChannelInboundHandlerAdapter;public class MyChatServerHandler3 extends ChannelInboundHandlerAdapter {Overridepublic void userEventTriggered(…

UTC时间戳与北京时间转换

文章目录 前言一、几个时间相关的概念二、场景三、验证方法四、源码五、运行结果六、资源自取 前言 在应用中用到了 UTC 时间戳与北京时间进行转换的需求&#xff0c;这里做一个记录&#xff0c;方便后面有需求时直接拿来用。 一、几个时间相关的概念 GMT 时间&#xff1a;Gr…

SpringBoot内置工具类之断言Assert的使用与部分解析

2023.10.29更新&#xff1a; 使用assert的不利之处&#xff1a; 1、assert关键字需要在运行时候显式开启才能生效&#xff0c;否则你的断言就没有任何意义。而现在主流的Java IDE工具默认都没有开启-ea断言检查功能。这就意味着你如果使用IDE工具编码&#xff0c;调试运行时候…

ASP.NET WebApi 极简依赖注入

文章目录 环境服务类启动项注入使用依赖注入的优点 环境 .NET Core 7.0ASP.NET CoreVisual Studio 2022 服务类 public class T_TempService {public T_TempService(){}public void Test(){}}启动项注入 #region 依赖注入 builder.Services.AddTransient<T_TempService&g…

滑动窗口限流算法实现一

固定算法 原理&#xff1a;固定算法是将时间线分隔成固定大小的时间窗口&#xff0c;每个窗口都会有个计数器&#xff0c;用来记录窗口时间范围内的请求总数&#xff0c;如果窗口的请求总数达到最大限定值&#xff0c;会认定流量超限。比如将窗口大小设为1分钟&#xff0c;每分…

科大讯飞勾勒生成式AI输入法“模样”,开启下一代输入法革命

回顾国内第三方输入法赛道近十余年的发展&#xff0c;移动互联网的市场红利催生了科大讯飞、百度、搜狗等颇具规模和实力的头部厂商。与此同时&#xff0c;历经多年、多方角逐&#xff0c;第三方输入法市场进入存量阶段&#xff0c;升级技术、优化用户体验来挖掘存量&#xff0…

Rest风格基本语法与实战

1&#xff0c;前置知识点 1.1 GetMapping&#xff0c;PostMapping&#xff0c;PutMapping&#xff0c;DeleteMapping 平时我们都是使用RequestMapping&#xff0c;然后通过它的method属性来指定请求的方式&#xff0c;这样是有些麻烦的&#xff0c;然后这四个标签就是来简化这…

MySQL安装『适用于 CentOS 7』

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; MySQL 学习 &#x1f383;操作环境&#xff1a; CentOS 7.6 腾讯云远程服务器 &#x1f381;软件版本&#xff1a; MySQL 5.7.44 文章目录 1.MySQL 的清理与安装1.1查看是否存在 MySQL 服务1.2.卸载原有服务1.…

JS逆向基础之反调试

JS逆向基础之反调试 截至目前的话大家应该都知道我们在进行js逆向的时候需要打开浏览器开发者工具进行网页的调试&#xff0c;但是在有时候网站会阻止我们去调试它的代码&#xff0c;而其阻止我们的手段也是多种多样的。接下来我们就来简单了解一下逆向过程中常见的反调试手段…

keealived安装配置启动

1.keepalived作用和原理图 keepalived作用:解决单点故障简单原理图1: 2.keepalived安装配置启动 地址: https://www.keepalived.org/download.html# 1)解压 tar -zxvf keepalived-2.0.18.tar.gz # 2)进入keepalived目录 cd keepalived-2.0.18/ # 3)安装libnl/libnl-3依赖…

chat gpt 在开发当中的应用

chatgpt 出来已经有一段时间了&#xff0c;本人在开发的过程中也是有去使用。 经常使用的是讯飞大模型和通义千问&#xff0c;在使用的过程中&#xff0c;个人感觉讯飞大模型在写代码方面会比较智能。 比如问一个 sqlser 单表 数据量 几个亿如何处理的问题&#xff0c;讯飞会给…

C/C++ 飞翔的小鸟

载入问题&#xff1a; 解决之后效果&#xff1a; 放在main函数里面进行封装&#xff1a; 效果展示: 实现下坠 放进while&#xff08;1&#xff09;里面不断进入循环&#xff0c;每次进入循环&#xff0c;鸟的y坐标值就会发生变化&#xff0c;以此实现下下坠效果 效果展示&#…

Vue 数据绑定 和 数据渲染

目录 一、Vue快速入门 1.简介 : 2.MVVM : 3.准备工作 : 二、数据绑定 1.实例 : 2.验证 : 三、数据渲染 1.单向渲染 : 2.双向渲染 : 一、Vue快速入门 1.简介 : (1) Vue[/vju/]&#xff0c;是Vue.js的简称&#xff0c;是一个前端框架&#xff0c;常用于构建前端用户…