前端开发 vue 中如何实现 u-form 多个form表单同时校验
在 Vue 项目中使用 UView UI 的 u-form 组件时,多个表单同时校验的需求非常常见。例如,当我们有多个表单需要在同一个页面中进行校验并提交时,我们需要确保每个表单都能进行单独验证,同时可以在同一时刻进行批量验证。
接下来,我们结合实际项目的代码,讲解如何使用 u-form 组件实现多个表单同时校验。
1. 项目背景
假设你有一个页面,需要用户同时填写用户信息和公司信息两个表单。用户信息包括姓名和年龄,公司的信息包括公司名和职位。你希望在用户点击提交按钮时,能够同时校验这两个表单,确保每个表单的数据都符合要求。
2. 代码示例
2.1 页面模板
<template><view><!-- 用户信息表单 --><u-form :model="userForm" ref="userForm" @submit="submitForms"><u-form-item label="姓名" prop="name" :rules="nameRules"><u-input v-model="userForm.name" placeholder="请输入姓名" /></u-form-item><u-form-item label="年龄" prop="age" :rules="ageRules"><u-input type="number" v-model="userForm.age" placeholder="请输入年龄" /></u-form-item><u-form-item><u-button type="primary" block formType="submit">提交用户信息</u-button></u-form-item></u-form><!-- 公司信息表单 --><u-form :model="companyForm" ref="companyForm" @submit="submitForms"><u-form-item label="公司名称" prop="companyName" :rules="companyNameRules"><u-input v-model="companyForm.companyName" placeholder="请输入公司名称" /></u-form-item><u-form-item label="职位" prop="position" :rules="positionRules"><u-input v-model="companyForm.position" placeholder="请输入职位" /></u-form-item><u-form-item><u-button type="primary" block formType="submit">提交公司信息</u-button></u-form-item></u-form><!-- 提交按钮 --><u-button type="success" block @click="submitForms">提交所有信息</u-button></view>
</template>
2.2 页面脚本
<script>
export default {data() {return {// 用户信息表单的数据userForm: {name: '',age: ''},// 用户信息表单的校验规则nameRules: [{ required: true, message: '姓名是必填的', trigger: 'blur' }],ageRules: [{ required: true, message: '年龄是必填的', trigger: 'blur' },{ type: 'number', message: '请输入有效的年龄', trigger: 'blur' }],// 公司信息表单的数据companyForm: {companyName: '',position: ''},// 公司信息表单的校验规则companyNameRules: [{ required: true, message: '公司名称是必填的', trigger: 'blur' }],positionRules: [{ required: true, message: '职位是必填的', trigger: 'blur' }]};},methods: {// 提交表单submitForms() {// 同时校验所有表单const userFormValidation = this.$refs.userForm.validate();const companyFormValidation = this.$refs.companyForm.validate();// 使用 Promise.all 来并行验证多个表单Promise.all([userFormValidation, companyFormValidation]).then(() => {// 如果所有表单验证通过this.$u.toast('所有表单验证通过,提交成功');// 可以在这里进行数据提交}).catch(() => {// 如果有任何表单验证失败this.$u.toast('表单验证失败,请检查输入');});}}
};
</script>
3. 详细说明
3.1 表单组件使用
-
u-form:这是 UView UI 中的表单组件。每个表单组件通过:model绑定对应的数据对象,通过ref设置引用名,以便在 JavaScript 中获取并调用表单的验证方法。 -
u-form-item:每个表单项。它用来包装一个表单字段,并且通过prop来指定字段名称,用来与表单数据进行绑定。 -
u-input:用于输入数据的组件。它通过v-model来双向绑定数据。
3.2 校验逻辑
-
表单校验规则:每个表单项都有相应的校验规则(
rules)。这些规则确保字段的输入符合预期。在此示例中,我们使用了必填和类型检查(如number类型)的规则。 -
validate方法:每个u-form组件都有一个validate方法,它会触发表单的校验并返回一个Promise。如果表单验证成功,Promise会成功解析;如果验证失败,Promise会被拒绝。
3.3 提交和批量校验
-
submitForms方法:这是页面的提交处理方法。在该方法中,我们使用了this.$refs.userForm.validate()和this.$refs.companyForm.validate()来分别触发两个表单的校验,并通过Promise.all来并行校验这两个表单。 -
Promise.all:我们将两个表单的校验Promise包装到Promise.all中。这样,两个表单的校验会同时进行。当所有表单验证都成功时,then方法被触发;如果有任何一个表单验证失败,catch方法会被触发。 -
this.$u.toast:用来显示提示消息,通知用户是否提交成功或失败。
4. 关键点总结
- 使用
ref引用多个表单,方便访问每个表单实例。 - 通过
this.$refs.form.validate()触发表单校验。 - 使用
Promise.all来并行校验多个表单,确保所有表单的验证同时进行。 - 利用
validate返回的Promise来处理校验成功与失败的逻辑。
5. 实际项目中的应用场景
在实际项目中,可能会有以下场景需要处理多个表单的验证:
- 多步骤表单:用户在不同的步骤中填写不同的表单,在提交时需要同时验证所有步骤的表单。
- 用户与公司信息:用户需要在同一页面提交多个表单(例如,个人信息和公司信息),而且这些表单有不同的校验规则。
- 动态表单:根据不同的用户选择,动态展示多个表单项,最后进行一次统一的验证。
通过使用 u-form 的并行校验方法,可以方便地实现这些需求,提高用户体验和开发效率。
相关文章:
前端开发 vue 中如何实现 u-form 多个form表单同时校验
在 Vue 项目中使用 UView UI 的 u-form 组件时,多个表单同时校验的需求非常常见。例如,当我们有多个表单需要在同一个页面中进行校验并提交时,我们需要确保每个表单都能进行单独验证,同时可以在同一时刻进行批量验证。 接下来&am…...
【网络】什么是速率 (Rate)带宽 (Bandwidth)吞吐量 (Throughput)?
注意单位: 在 kbps、Mbps、Gbps 中,前面的 k、M、G 是 国际单位制(SI) 的前缀,表示不同的数量级: k(千/kilo): (10^3 1,000) kbps(kilobits per second): 每秒 1,000 位(…...
(leetcode算法题)769. 最多能完成排序的块
Q1. 是否能用贪心算法?为什么? 先预设一个策略,每当当前的nums[i]满足可以 "成块",就直接让这个数成块,也就是说之后的遍历过程中不会将这个数在考虑到自己的块内, "成块" 是指只要只…...
高光谱相机的特点
光谱特性 高光谱分辨率:能将光谱范围分割成极窄的波段,光谱分辨率通常达到纳米级甚至亚纳米级,可精确捕捉到不同物质在细微光谱差异上的特征,比如可以区分不同种类的植被因叶绿素含量等差异而在光谱上的细微变化。 多波段探测&a…...
《Spring Framework实战》8:4.1.3.Bean 概述
欢迎观看《Spring Framework实战》视频教程 Spring IoC 容器管理一个或多个 bean。这些 bean 是使用 您提供给容器的配置元数据(例如,以 XML <bean/>定义的形式)。 在容器本身中,这些 bean 定义表示为BeanDefinition对象&a…...
BGP的local_preference本地优先级属性
一、BGP的local preference属性简介 1、local preference公认任意属性 当一条BGP路由器中存在多条去往同一目标网络的BGP路由时,BGP协议会对这些BGP路由属性进行比较,从而筛选出最佳到达目标网络的通达路径。本地优先属性,只在IBGP对等体之间…...
IP地址与端口号
ip地址与端口号 IP地址和端口号是网络通信中的两个重要概念,它们共同构成了网络通信的基础。 IP地址:网络世界的门牌号 定义:IP地址(Internet Protocol Address)是分配给网络设备的数字标签,用于在计算机网…...
Fastapi + vue3 自动化测试平台(2)--日志中间件
FastAPI Vue3 自动化测试平台(2)-- 日志中间件 前言 在开发和运行自动化测试平台时,日志功能是至关重要的一部分。日志不仅能帮助我们快速定位和解决问题,还能作为平台运行的记录依据,为后续分析和优化提供参考。 …...
iOS - AutoreleasePool
1. 基本数据结构 // AutoreleasePool 的基本结构 struct AutoreleasePoolPage {static pthread_key_t const key AUTORELEASE_POOL_KEY;magic_t const magic;id *next; // 指向下一个可存放对象的地址pthread_t const thread; // 所属线程AutoreleasePoolPage …...
1.CSS的复合选择器
1.1 什么是复合选择器 在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基础选择器进行组合形成的。 复合选择器可以更精准、更高效的选择目标元素(标签) 复…...
优质内容在个人IP运营中的重要性:以开源AI智能名片商城小程序为应用实例的深度探讨
摘要:在数字化时代,个人品牌(IP)的塑造与传播已成为各行各业提升影响力、吸引用户关注、促进商业转化的关键策略。优质内容作为连接个人IP与目标受众的桥梁,其在个人IP运营中的重要性不言而喻。本文旨在深入探讨优质内…...
Kafka性能测试
kafka是一个大数据消息队列(可以看做为缓存软件) 功能测试:能够读写数据 性能测试:1、测试生产者每秒往kafka写入的最大吞吐量 2、测试消费者每秒从kafka里获取消息最大吞吐量 硬件 3台物理机组成的kafka集群。 内存121G、24…...
解决Docker冲突问题
错误:docker-ce-cli conflicts with 2:docker-1.13.1-210.git7d71120.el7.centos.x86_64 错误:docker-ce conflicts with 2:docker-1.13.1-210.git7d71120.el7.centos.x86_64 您可以尝试添加 --skip-broken 选项来解决该问题 您可以尝试执行:…...
新手入门 React .tsx 项目:从零到实战
🚀 新手入门 React .tsx 项目:从零到实战 💻✨ 如果你是 React 新手,刚接触 .tsx 文件,不要担心!跟着这份指南,一步一步来,你很快就能上手了!👇 Ὅ…...
基于可信数据空间的企业数据要素与流通体系建设(附ppt 下载)
近期,可信数据空间会议召开。大数据系统软件国家工程研究中心总工程师王晨发表了题为《基于可信数据空间的企业数据要素与流通体系建设》主旨演讲。 篇幅限制,部分内容如下:...
二维数组:求最大元素及其所在的行坐标及列坐标(PTA)C语言
求出NM整型数组的最大元素及其所在的行坐标及列坐标(如果最大元素不唯一,选择位置在最前面的一个)。 函数接口定义: int fun(int array[N][M]) ; 注意:函数只需靠return返回最大元素的值, 行、列坐标通过…...
WebRtc01: 课程导学、框架介绍
应用 难点 课程大纲 学习收获 涉及内容 概述 用途 学习收获...
HQChart使用教程30-K线图如何对接第3方数据44-DRAWPIE数据结构
HQChart使用教程30-K线图如何对接第3方数据44-DRAWPIE数据结构 效果图DRAWPIEHQChart代码地址后台数据对接说明示例数据数据结构说明效果图 DRAWPIE DRAWPIE是hqchart插件独有的绘制饼图函数,可以通过麦语法脚本来绘制一个简单的饼图数据。 饼图显示的位置固定在右上角。 下…...
【cuda学习日记】2.2 使用2维网络(grid)和2维块(block)对矩阵进行求和
在2.0中进行了用一维网格和块对一维向量进行了求和。 在2.1中例化了二维的网格和块。 接下来进行2维网络(grid)和2维块(block)对矩阵进行求和。 #include <stdio.h> #include <stdlib.h> #include <time.h> #i…...
深度学习中CUDA环境安装教程
首先说明,本人是小白,一次安装,可能有不对的地方,望包含。 安装CUDA 因为我们是深度学习,很多时候要用到gpu进行训练,所以我们需要一种方式加快训练速度。 通俗地说,CUDA是一种协助“CPU任务分…...
【Zotero】Zotero翻译插件时好时坏?一文讲透原因与解决方案
学术人的痛:今天的翻译,明天的“请求错误” 作为一名重度文献阅读者,我每天与Zotero相伴的时间比跟室友说话还多。它的PDF Translate插件堪称学术神器——划词即译,让外语文献阅读效率翻倍。 但有一个问题一直困扰着我ÿ…...
Spring Boot 4.0正式版GA后72小时内,头部云厂商紧急下架3款旧Agent插件——你的生产集群是否仍在使用已被标记为EOL的Instrumentation库?
第一章:Spring Boot 4.0 Agent-Ready 架构演进与EOL危机全景Spring Boot 4.0 并非官方已发布版本,而是社区与企业级监控、可观测性厂商围绕 Java Agent 深度集成所推动的架构预演范式。其核心驱动力源于 Spring Boot 3.x 的 Jakarta EE 9 迁移完成、Graa…...
Phi-4-mini-reasoning百度搜索友好:生成结构化、可索引的推理答案
Phi-4-mini-reasoning 使用指南:生成结构化推理答案 1. 模型概述 Phi-4-mini-reasoning 是一款由微软开发的轻量级开源模型,专为数学推理、逻辑推导和多步解题等强逻辑任务设计。这个3.8B参数的模型主打"小参数、强推理、长上下文、低延迟"的…...
为啥学C语言绕不开指针?懂它封神,不懂直接劝退,真相太扎心
一、学C的人,一半栽在指针上,一半靠它拿高薪 无数程序员入门C语言时,都有过同一个崩溃瞬间:对着指针的*和&抓耳挠腮,明明看书上写的是“存储内存地址的变量”,可实操起来却频频报错,甚至直接…...
【GUI-Agent】阶跃星辰 GUI-MCP 解读---()---HITL(Human In The Loop)鬃
插件化架构 v3 版本最大的变化是引入了模块化插件系统。此前版本中集成在核心包里的原生功能,现在被拆分成独立的插件。 每个插件都是一个独立的 Composer 包,包含 Swift 和 Kotlin 代码、权限清单以及原生依赖。开发者只需安装实际用到的插件࿰…...
LexikJWTAuthenticationBundle源码解析:深入理解JWT认证实现原理
LexikJWTAuthenticationBundle源码解析:深入理解JWT认证实现原理 【免费下载链接】LexikJWTAuthenticationBundle JWT authentication for your Symfony API 项目地址: https://gitcode.com/gh_mirrors/le/LexikJWTAuthenticationBundle LexikJWTAuthenticat…...
Python + LlamaIndex 构建本地知识库:打造企业级私有 RAG 系统
零 API 费用、数据完全本地、支持多种文档格式。本文带你从安装到实战,45 分钟搭建一个企业级本地知识库系统。 一、为什么要构建本地知识库? 对比维度 云端知识库(Notion AI / 飞书) 本地 RAG(LlamaIndex) 费用 按用户/容量付费,20-100/人/月 完全免费 数据隐私 数据上…...
程序员副业图谱
引言:程序员副业的现状与趋势程序员副业需求增长的背景(技术变现、职业发展多元化)CSDN作为技术社区在副业生态中的角色CSDN程序员副业图谱的核心模块技术内容创作博客/专栏写作:技术干货、实战经验、行业分析视频教程:…...
html怎么转rollup plugin html_Rollup如何通过插件处理HTML入口
rollup-plugin-html 未生效的根本原因是 Rollup 默认不处理 HTML,需将 html() 插件置于 resolve() 和 commonjs() 之前,并配置 transformers、路径映射及环境变量注入方式。rollup-plugin-html 为什么没生效?常见现象是 HTML 文件被当成普通资…...
OpenClaw个人知识库:Qwen3-32B+Obsidian自动化信息归档系统
OpenClaw个人知识库:Qwen3-32BObsidian自动化信息归档系统 1. 为什么需要自动化知识管理 作为一个长期被信息过载困扰的技术写作者,我每天需要处理数十篇技术文章、研究报告和行业动态。传统的手动分类方式让我陷入两个困境:一是收藏的文章…...
