当前位置: 首页 > news >正文

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;}});}

相关文章:

el-form表单实现校验

前端表单实现&#xff0c; rules 属性传入约定的验证规则&#xff0c;并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 <el-form ref"ruleFormRef" :model"interviewForm" label-position"left" require-asterisk-position"…...

一台TrinityCore服务器客户端连接网速慢(未解决)

在FreeBSD开bhyve安装Ubuntu&#xff0c;然后安装了TrinityCore服务器&#xff0c;在只是经过一层NAT&#xff0c;两边都是局域网的情况下&#xff0c;连接速度竟然很慢&#xff0c;慢到600ms。 服务器安装见&#xff1a;尝试在FreeBSD 的jail、bhyve里安装TrinityCore-CSDN博…...

[系统运维|Xshell]宿主机无法连接上NAT网络下的虚拟机进行维护?主机ping不通NAT网络下的虚拟机,虚拟机ping的通主机!解决办法

遇到的问题&#xff1a;主机ping不通NAT网络下的虚拟机&#xff0c;虚拟机ping的通主机 服务器&#xff1a;Linux&#xff08;虚拟机&#xff09; 主机PC&#xff1a;Windows 虚拟机&#xff1a;vb&#xff0c;vm测试过没问题&#xff0c;vnc没测试不清楚 虚拟机网络&#xff1…...

C 语言实例 - 查找数组中最大的元素值

查找数组中最大的元素值。 实例 1 #include <stdio.h>int main() {int array[10] {1, 2, 3, 4, 5, 6, 7, 8, 9, 0};int loop, largest;largest array[0];for(loop 1; loop < 10; loop) {if( largest < array[loop] ) largest array[loop];}printf("最大…...

MySQL之可扩展性(七)

可扩展性 通过集群扩展 理想的扩展方案时单一逻辑数据库能够存储尽可能多的数据&#xff0c;处理尽可能多的查询&#xff0c;并如期望的那样增长。许多人的第一想法就是建立一个"集群"或者"网格"来无缝处理这些事情&#xff0c;这样应用就无须去做太多工…...

微服务框架中Nacos的个人学习心得

微服务框架需要学习的东西很多&#xff0c;基本上我把它分为了五个模块&#xff1a; 第一&#xff1a;微服务技术模块 分为三个常用小模块&#xff1a; 1.微服务治理&#xff1a; 注册发现 远程调用 配置管理 网关路由 2.微服务保护&#xff1a; 流量控制 系统保护 熔断降级 服…...

Unity Animator 运行时修改某个动画状态的播放速度

1.添加动画参数&#xff0c;选择需要动态修改速度的动画状态 2.在属性面板种设置速度倍速参数...

阿里云常用的操作

阿里云常见的产品和服务 容器服务 可以查看容器日志、监控容器cpu和内存&#xff0c; 日志服务 SLS 可以查看所有服务的日志&#xff0c; Web应用防火墙 WAF 可以查看 QPS. 阿里云查看集群&#xff1a; 点击 “产品和服务” 中的 容器服务&#xff0c;可以查看 集群列表&…...

【MATLAB源码-第231期】基于matlab的polar码编码译码仿真,对比SC,SCL,BP,SCAN,SSC等译码算法误码率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 极化码&#xff08;Polar Code&#xff09; 极化码&#xff08;Polar Code&#xff09;是一种新型的信道编码技术&#xff0c;由土耳其裔教授Erdal Arıkan在2008年提出。极化码在理论上被证明能够在信道容量上达到香农极限…...

创新实训(十三) 项目开发——实现用户终止对话功能

思路分析&#xff1a; 如何实现用户终止AI正在进行的回答&#xff1f; 分析实现思路如下&#xff1a; 首先是在用户点击发送后&#xff0c;切换终止对话&#xff0c;点击后大模型终止对话&#xff0c;停止sse&#xff0c;不再接收后端的消息。同时因为对话记录存入数据库是后…...

基于Java+MySQL停车场车位管理系统详细设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…...

LeetCode 53.最大子数组和(dp)

给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&#xff1a;…...

IOS17闪退问题Assertion failure in void _UIGraphicsBeginImageContextWithOptions

最近项目更新到最新版本IOS17&#xff0c;发现一个以前的页面突然闪退了。原来是IOS17下&#xff0c;这个方法 UIGraphicsBeginImageContext(CGSize size) 已经被移除&#xff0c;原参数如果size为0的话&#xff0c;会出现闪退现象。 根据说明&#xff0c;上述方法已经被替换…...

float8格式

产生背景 在人工智能神经元网络中&#xff0c;一个参数用1字节表示即可&#xff0c;或者说&#xff0c;这是个猜想&#xff1a;因为图像的颜色用8比特表示就够了&#xff0c;所以说&#xff0c;猜想神经元的区分度应该小于256。 数字的分配 8比特有256个码位&#xff0c;分为…...

云效BizDevOps上手亲测

云效BizDevOps上手亲测 什么是云效项目协作Projex配置2023业务空间原始诉求字段原始诉求工作流创建原始诉求配置2023产品空间创建主题业务原始诉求关联主题配置2023研发空间新建需求需求关联主题 与传统区别云效开发流程传统开发流程云效BizDevOps 操作体验 什么是云效 在说到…...

亚太杯赛题思路发布(中文版)

导读&#xff1a; 本文将继续修炼回归模型算法&#xff0c;并总结了一些常用的除线性回归模型之外的模型&#xff0c;其中包括一些单模型及集成学习器。 保序回归、多项式回归、多输出回归、多输出K近邻回归、决策树回归、多输出决策树回归、AdaBoost回归、梯度提升决策树回归…...

【Linux】部署 GitLab 服务

1、配置实验环境 安装git apt install git 安装docker apt install docker 安装tree apt install tree 2、安装 Gitlab 下载官方库与安装包 下载官方库的安装脚本 curl https://packages.gitlab.com/install/repositories/gitlab/gitlab-ee/script.deb.sh | sudo bas…...

cs与msf权限传递以及mimikatz抓取win2012明文密码

启动服务端 进入客户端 建立监听 制作脚本 客户端运行程序 主机上线 打开msf 调用handler模块 创建监听 11.cs->msf 传递会话 12.传参完成 msf->cs会话传递 抓取密码&#xff08;null&#xff09; 修改注册表 shell reg add "HKEY_LOC…...

C++ 矩阵的最小路径和解法

描述 给定一个 n * m 的矩阵 a,从左上角开始每次只能向右或者向下走,最后到达右下角的位置,路径上所有的数字累加起来就是路径和,输出所有的路径中最小的路径和。 数据范围: 1≤𝑛,𝑚≤5001≤n,m≤500,矩阵中任意值都满足 0≤𝑎𝑖,𝑗≤1000≤ai,j​≤100 要求…...

http服务网络请求如何确保数据安全(含python示例源码)

深度学习类文章回顾 【YOLO深度学习系列】图像分类、物体检测、实例分割、物体追踪、姿态估计、定向边框检测演示系统【含源码】 【深度学习】物体检测/实例分割/物体追踪/姿态估计/定向边框/图像分类检测演示系统【含源码】 【深度学习】YOLOV8数据标注及模型训练方法整体流程…...

网络构建关键技术_2.IPv4与IPv6融合组网技术

互联网数字分配机构&#xff08;IANA&#xff09;在2016年已向国际互联网工程任务组&#xff08;IETF&#xff09;提出建议&#xff0c;要求新制定的国际互联网标准只支持IPv6&#xff0c;不再兼容IPv4。目前&#xff0c;IPv6已经成为唯一公认的下一代互联网商用解决方案&#…...

数仓建模—数据生命周期管理

数仓建模—数据生命周期管理 数据生命周期管理 (DLM) 是一种在从数据输入到数据销毁的整个生命周期内管理数据的方法。 数据根据不同的条件分处不同的阶段,随着其完成不同的任务或满足特定要求而逐次经历这些阶段。 一个出色的 DLM 流程提供针对企业数据的结构和组织,帮助实…...

【INTEL(ALTERA)】Nios II软件开发人员手册中设计位置的错误示例

目录 说明 解决方法 说明 Nios II软件开发人员手册正确无误 请参阅 Nios 中包含的Nios II硬件设计示例 II 嵌入式设计套件 &#xff08;EDS&#xff09;。提供设计示例 设计上 Altera网站的示例页面。 Nios II软件开发人员手册正确无误 请参阅 创建本应用程序和创建本 bsp …...

jeecg导入excel 含图片(嵌入式,浮动式)

jeecgboot的excel导入 含图片&#xff08;嵌入式&#xff0c;浮动式&#xff09; 一、啰嗦二、准备三、 代码1、代码&#xff08;修改覆写的ExcelImportServer&#xff09;2、代码&#xff08;修改覆写的PoiPublicUtil&#xff09;3、代码&#xff08;新增类SAXParserHandler&a…...

GPT-5 一年半后发布?对此你有何期待?

GPT-5 一年半后发布&#xff1f;对此你有何期待&#xff1f; IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院周四公布的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布&#xff0c;给出了肯定答案并表示将在一年半后发布。此外&#xff0c;…...

SHELL脚本学习(十二)sed进阶

一、多行命令 概述 sed 编辑器的基础命令都是对一行文本进行操作。如果要处理的数据分布在多行中&#xff0c;sed基础命令是没办法处理的。 幸运的是&#xff0c;sed编辑器的设计人员已经考虑了这个问题的解决方案。sed编辑器提供了3个处理多行文本的特殊命令。 命令描述N加…...

【python】一篇文零基础到入门:快来玩吧~

本笔记材料源于&#xff1a; PyCharm | 创建你的第一个项目_哔哩哔哩_bilibili Python 语法及入门 &#xff08;超全超详细&#xff09; 专为Python零基础 一篇博客让你完全掌握Python语法-CSDN博客 0为什么安装python和pycharm&#xff1f; 不同于c&#xff0c;c&#xff0…...

Python武器库开发-武器库篇之Thinkphp5 SQL注入漏洞(六十六)

Python武器库开发-武器库篇之Thinkphp5 SQL注入漏洞&#xff08;六十六&#xff09; 漏洞环境搭建 这里我们使用Kali虚拟机安装docker并搭建vulhub靶场来进行ThinkPHP漏洞环境的安装&#xff0c;我们进入 ThinkPHP漏洞环境&#xff0c;可以 cd ThinkPHP&#xff0c;然后通过 …...

2024.6.28刷题记录

目录 一、13. 罗马数字转整数 贪心 二、16. 最接近的三数之和 排序指针 三、17. 电话号码的字母组合 dfs&#xff08;深度优先搜索&#xff09; 四、19. 删除链表的倒数第 N 个结点 1.模拟 2.前后同步指针 五、20. 有效的括号 栈 六、21. 合并两个有序链表 1.递归 …...

柔性数组(flexible array)

柔性数组从C99开始支持使用 1.柔性数组的概念 概念&#xff1a; 结构体中&#xff0c;结构体最后一个元素允许是未知大小的数组&#xff0c;这就叫[柔性数组]的成员 struct S {int n;char arr[]; //数组大小未知(柔性数组成员) }; 柔性数组的特点&#xff1a; 结构体中柔性…...

wordpress本地上传视频资料/产品代理推广方案

为什么项目过程中折腾我们的往往是一些微不足道的小事?新功能添加"顺手就改,转眼就忘,一旦出错,一问就蒙"的情况如何避免? 答案:流程 一年前我还对流程表示反感和排斥,因为我将"流程"简单地等同于堆积如山的文档和照本宣科的会议,牺牲了弥足珍贵的设计和…...

网站设置了跳转被qq拦截/百度推广的五大优势

blender是免费开源的荷兰3D建模软件&#xff0c;对中文有很好的支持&#xff0c;有Windows,Linux,Mac等不同平台的版本&#xff0c;安装文件不到20M&#xff0c;运行其中某些脚本需要Python环境的支持&#xff0c;建议安装Python环境。软件界面独特&#xff0c;可以进行建模、渲…...

免费网站建设哪个好/看b站视频软件下载安装

2020/08/12每日二十个英语单词 tuning 调谐&#xff1b;调频tuning and control interface 调谐及控制接口tuning fork 音叉tuning, fine 微调&#xff1b;精调tunnel diode 隧道二极管tunnel effect 隧道效应tunneling 隧道技术tunneling, quantum 量子隧道turbine 涡轮turbo…...

做网站的费用计入哪个科目/深圳搜索引擎优化推广

09年接触Asp.Net编程&#xff0c;在10年开始接触三层&#xff0c;当时不懂架构更不了解三层的内在&#xff0c;只是知道通过三层产生的BLL、DAL、Model能够实现程序的方便管理&#xff0c;同时也因为代码生成器的帮忙&#xff0c;大大加快了开发的效率&#xff0c;我们可以用很…...

响应式自适应网站/互联网营销师报名

入门使用 例1:使用编译好的kenlm工具手动生成file.arpa&#xff0c;然后测试如下代码 #include "lm/model.hh" #include <iostream> #include <string> int main() {using namespace lm::ngram;Model model("file.arpa");State state(model.…...

嘉祥网站建设多少钱/网络营销以什么为中心

打开文件&#xff0c;路径为 C:\Windows\Microsoft.NET\Framework\v2.0.50727\InstallSqlState.sql v2.0.50727 版本根据自己的framework版本选择 ASPState 存放的是.NET 访问的session&#xff0c;避免了session丢失的问题&#xff0c;但是会影响交互的效率转载于:https://w…...