el-form表单实现校验

前端表单实现, rules 属性传入约定的验证规则,并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。

 <el-form ref="ruleFormRef" :model="interviewForm" label-position="left" require-asterisk-position="right" :rules="rules" label-width="90px" style="max-width: 600px" status-icon size="middle"><el-form-item label="面试名称" prop="interviewName"><el-input v-model="interviewForm.interviewName" placeholder="请输入" /></el-form-item><el-form-item label="面试类型" prop="interviewType"><el-radio-group v-model="interviewForm.interviewType" ><el-radio-button :label="type" :value="type" v-for="type, index in interviewTypeList" /></el-radio-group></el-form-item><div v-if="interviewForm.interviewType == '就业'"><el-form-item label="岗位名称" prop="jobTitle"><el-input v-model="interviewForm.jobTitle" placeholder="请输入" /></el-form-item><el-form-item label="岗位描述" ><el-input v-model="interviewForm.jobDesc" type="textarea" /></el-form-item><el-form-item label="工作年限" prop="jobYear"><el-input-number v-model="interviewForm.jobYear" :min="0" placeholder="请输入" /></el-form-item></div><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button @click="resetForm">重置</el-button></el-form-item></el-form>

部分验证规则如下

  rules: {interviewName: [{ required: true, message: '请输入面试名称', trigger: 'blur' },{ min: 1, max: 10, message: '长度应该在1到10个字符之间', trigger: 'blur' },],jobTitle: [{ required: true, message: '请输入岗位名称', trigger: 'blur' },{ min: 1, max: 10, message: '长度应该在1到10个字符之间', trigger: 'blur' },],}	

点击提交时验证表单数据

   submitForm() {#this.$refs 是 Vue 提供的一个对象,包含所有使用 ref 属性注册的子组件或 DOM 元素。#ruleFormRef 是在 el-form 组件上设置的 ref 名称,因此 this.$refs.ruleFormRef 引用了这个 el-form 组件实例。#validate 是 el-form 组件实例上的一个方法,用于触发表单的验证。它会根据 rules 属性中定义的验证规则来验证表单的每一个字段。this.$refs.ruleFormRef.validate((valid) => {if (valid) {alert('表单验证成功!');} else {console.log('表单验证失败!');return false;}});}

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

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

相关文章

Construct公司 从 0 到 1 基于 Kitex+Istio 的微服务系统建设

本文根据 2024 年 5 月 25 日在上海举办的“云原生✖️AI 时代的微服务架构与技术实践”CloudWeGo 技术沙龙上海站活动中&#xff0c;Construct 服务端总监 Jason 的演讲《从 0 到 1 基于 Kitex Istio 的微服务系统建设》整理而来。 在微服务架构的浪潮中&#xff0c;企业面临…

k8s_如何配置 containerd 使用镜像加速拉取docker.io上的镜像

在 Kubernetes 使用 containerd 作为容器运行时&#xff0c;可以通过配置 containerd 来使用镜像网站&#xff08;镜像仓库&#xff09;拉取镜像。这可以通过修改 containerd 的配置文件来实现。以下是详细步骤&#xff1a; 步骤 1&#xff1a;安装 containerd (如果已安装&am…

STM32学习和实践笔记(38):RTC实时时钟实验

1.STM32F1 RTC介绍 STM32 的实时时钟&#xff08; RTC&#xff09;是一个独立的定时器。 STM32 的 RTC 模块拥有一组连续计数的计数器&#xff0c;在相应软件配置下&#xff0c;可提供时钟日历的功能。修改计数器的值可以重新设置系统当前的时间和日期。 RTC模块和时钟配置…

事务的特性-原子性(Atomicity)、一致性(Consistency)、隔离性(Asolation)、持久性(Durability)

一、引言 1、数据库管理系统DBMS为保证定义的事务是一个逻辑工作单元&#xff0c;达到引入事务的目的&#xff0c;实现的事务机制要保证事务具有原子性、一致性、隔离性和持久性&#xff0c;事务的这四个特性也统称为事务的ACID特性 2、当事务保持了ACID特性&#xff0c;才能…

【精选】数据治理项目实施(合集)06——数据标准在数据治理中的落地实践

导读 本文对数据标准管理进行了深入探讨。重点介绍了数据标准的定义&#xff0c;实施路线和具体标准定义的内容&#xff0c;并总结了企业开展数据标准管理面临的常见问题&#xff0c;由于编写的水平和时间有限&#xff0c; 难免有所纸漏&#xff0c; 欢迎大家批评指正。 在现实…

Elasticsearch 优缓存和分片策略的影响

在Elasticsearch中&#xff0c;缓存机制和分片策略是影响其性能的关键因素。合理配置和使用这些机制&#xff0c;可以显著提升Elasticsearch的查询性能和系统稳定性。本文将深入探讨Elasticsearch的缓存机制和分片策略&#xff0c;并分析它们对系统性能的影响。 一、Elasticse…

MyBatis-关联查询的对象是集合的处理

用户和角色之间是多对多的关系&#xff0c;也就是说&#xff0c;一个用户可以有多个角色与之绑定&#xff0c;所以在User对象中&#xff0c;角色的属性就必须是一个集合Set或者List&#xff0c;这里我们就用List集合在做例子&#xff1a; 1.怎么在Mybatis中实现关联的List集合对…

k8s流控平台apiserver详解

一、简单理解认识apiserver 1.主要功能 认证 鉴权 准入 mutating validating admission 限流 2.概念 apiserver保护etcd&#xff0c;缓存机制&#xff0c;有缓存直接返回&#xff0c;没缓存再去查看etcd,apiserver是担任和其他平台同信并认证 3.访问控制概览…

ChatGPT不受支持的国家和地区

截至目前&#xff0c;OpenAI的ChatGPT在以下国家和地区不受支持&#xff1a; 中国俄罗斯朝鲜古巴伊朗叙利亚乌克兰&#xff08;有特定例外&#xff09; 从这些国家访问或提供访问ChatGPT的服务可能会导致账户被封锁或暂停。此政策旨在确保遵守当地法规和OpenAI的服务条款。 下…

【Android面试八股文】如何通过WindowManager添加Window?

文章目录 1. 获取WindowManager实例2. 创建一个Window的视图(View)3. 设置Window的布局参数(LayoutParams4. 添加权限5. 添加视图到WindowManager6. 完整示例7. 小结1. 获取WindowManager实例 你可以通过Context获取WindowManager实例。 WindowManager windowManager = (W…

python DoIPClient详解

python DoIPClient详解 DoIPClient 是 doipclient 库中的一个核心类&#xff0c;用于实现诊断通过 IP&#xff08;DoIP&#xff09;协议与汽车电子控制单元&#xff08;ECU&#xff09;进行通信。以下是对 DoIPClient 类的详细解释&#xff1a; 构造函数&#xff08;init 方法…

精益生产KPI指标分析与管理系统,助力企业挖掘数据黄金焕发第二生命线

智慧工厂精益生产追求以越来越少的投入获取越来越多的产出&#xff0c;通过消除浪费、提高效率来实现生产效益的最大化。精益生产强调量化管理&#xff0c;通过与KPI的结合&#xff0c;可以将生产过程中的关键数据进行量化和分析&#xff0c;推动企业各部门更加关注运营效率&am…

嵌入式Linux的浮点运算能力测试

嵌入式Linux的浮点运算能力测试 今天需要对一款ARM CPU的浮点数运算能力进行测试&#xff0c;采用了台式机上常用的SuperPI相同的原理&#xff1a;计算一定小数位数的圆周率来测试硬件的浮点数计算能力和稳定性。 首先下载计算软件的源代码&#xff0c;可以使用下面命令&#…

Excel 宏录制与VBA编程 —— 12、文本字符串类型相关(转换、拆分、分割、连接、替换、查找、“Like“)

字符串分割&#xff0c;文末示例&#xff08;文末代码3附有源码&#xff09; 代码1 - 基础字符串 代码2 - 字符串拆分 代码3 - 字符串分割 Option ExplicitSub WorkbooksClear()Dim DataRange As RangeSet DataRange Range("C2:E12")DataRange.Clear End SubSub Wo…

C++Primer Plus 第十四章代码重用:14.4.4 数组模板示例和非类型参数

系列文章目录 14.4.4 数组模板示例和非类型参数 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录14.4.4 数组模板示例和非类型参数 14.4.4 数组模板示例和非类型参数 模板常用作容器类&#xff0c;这…

NetSuite 隐藏功能之Memorized Transactions记忆交易

本周功课结束&#xff0c;想说说Memorized Transactions这个有时会被忽略的功能&#xff0c;顾名思义&#xff0c;记忆交易就是可以将一个原始的Transaction在创建后进行“记忆”&#xff0c;以保证后续可以在固定日期&#xff08;周期性日期或者自定义日期&#xff09;产生“被…

ABC355 Bingo2

分析&#xff1a; 找出其中一行或列或任意对角线被全部标记&#xff0c;即可输出回合数&#xff0c;否则输出-1 如果x%n0&#xff0c;行是x/n&#xff0c;列是n 如果x%n&#xff01;0&#xff0c;行是x/n1&#xff0c;列是x%n 如果行列或行列n1即为对角线。 标记行列对角线…

CISCN--西南半决赛--pwn

1.vuln 这是主函数&#xff0c;数一下就发现可以溢出最后的0x4008d0 然后会执行到这里&#xff0c;逻辑就是在v0上写shellcode&#xff0c;不过执行写0x10&#xff0c;不够sh&#xff0c;很明显要先read。 以下是exp: from pwn import * context.archamd64 ioprocess(./vuln)…

一大波客户感谢信来袭,感谢认可!

“自美的置业数据中台项目启动以来&#xff0c;贵公司实施团队与服务运营始终以专业、敬业、合作的态度扎根用户、服务用户、与用户共成长。在此&#xff0c;我司表示由衷的感谢&#xff01;” 这是携手美的置业以来&#xff0c;我们收到的第二封客户感谢信。 △ 以上为美的置…

Windwos +vs 2022 编译openssl 1.0.2 库

一 前言 先说 结论&#xff0c;编译64位报错&#xff0c;查了一圈没找到解决方案&#xff0c;最后换了32位的。 使用qt访问web接口&#xff0c;因为是https&#xff0c;没有openssl库会报错 QNetworkReply* reply qobject_cast<QNetworkReply*>(sender());if (reply){…