当前位置: 首页 > 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数据标注及模型训练方法整体流程…...

OpenClaw技能扩展指南:为百川2-13B添加公众号发布模块

OpenClaw技能扩展指南&#xff1a;为百川2-13B添加公众号发布模块 1. 为什么需要公众号发布技能 上周我正忙着准备一篇技术分享文章&#xff0c;突然意识到一个痛点&#xff1a;每次写完Markdown文档后&#xff0c;手动复制到公众号编辑器、调整格式、上传封面、设置摘要的过…...

DSP28335串口调试:从printf重定向到稳定数据输出的实战解析

1. 为什么需要printf重定向&#xff1f; 在DSP28335开发过程中&#xff0c;printf函数是我们最常用的调试工具之一。想象一下&#xff0c;当你需要实时查看算法运行状态、变量数值或者系统日志时&#xff0c;如果每次都要停下来用调试器查看&#xff0c;那效率得多低啊&#xf…...

开源工具wxappUnpacker:微信小程序逆向解析实战指南

开源工具wxappUnpacker&#xff1a;微信小程序逆向解析实战指南 【免费下载链接】wxappUnpacker 项目地址: https://gitcode.com/gh_mirrors/wxappu/wxappUnpacker 模块一&#xff1a;工具定位与价值——小程序开发的逆向工程利器 完成本节学习后你将能够&#xff1a;…...

MoveIt Config 配置文件完整一致性检查

检查范围&#xff08;全部核对完毕&#xff09;ros2_control xacro&#xff08;硬件接口 / 关节&#xff09;initial_positions.yaml&#xff08;初始位置&#xff09;srdf&#xff08;运动组 / 关节&#xff09;joint_limits.yaml&#xff08;关节限制&#xff09;kinematics.…...

【LAMMPS实战】从文献到模拟:精准定位与获取ReaxFF反应力场参数文件

1. 初识ReaxFF反应力场&#xff1a;为什么我们需要它&#xff1f; 第一次接触分子动力学模拟时&#xff0c;我完全被各种力场搞晕了。直到遇到需要模拟化学反应的情况&#xff0c;才发现普通的力场根本不够用。这时候ReaxFF反应力场就像救命稻草一样出现了。简单来说&#xff0…...

IntelliJ Conf:JetBrains Koog Java原生AI Agent框架实战

文章目录前言&#xff1a;Java程序员的"Agent焦虑"终于有解了认识Koog&#xff1a;不是又一个LangChain的Java版环境准备&#xff1a;5分钟让项目跑起来实战&#xff1a;从Hello World到智能客服第一步&#xff1a;定义工具&#xff08;Tool&#xff09;第二步&#…...

OpenClaw怎么集成?OpenClaw移动云小白6分钟搭建及使用指南【最新!】

OpenClaw怎么集成&#xff1f;OpenClaw移动云小白6分钟搭建及使用指南【最新&#xff01;】。OpenClaw怎么部署&#xff1f;本文面向零基础用户&#xff0c;完整说明在轻量服务器与本地Windows11、macOS、Linux系统中部署OpenClaw&#xff08;Clawdbot&#xff09;的流程&#…...

宁波小程序公司提供专业的小程序开发服务

在宁波小程序公司的服务中&#xff0c;我们致力于为客户提供清晰的内容结构和流畅的表达。我们通过深入的需求分析&#xff0c;确保每个项目都能符合客户特定的期望和市场需求。设计阶段注重市场调研&#xff0c;力求在视觉和功能上都能满足用户的使用习惯和偏好。开发过程中&a…...

视觉语言模型VLM高效部署:基于TensorRT-LLM的C++推理实践

1. 视觉语言模型VLM与TensorRT-LLM的黄金组合 视觉语言模型&#xff08;VLM&#xff09;这两年真是火得不行&#xff0c;它能让AI同时理解图片和文字&#xff0c;像人类一样看图说话。但实际部署时&#xff0c;很多团队都会遇到性能瓶颈——特别是用Python直接推理时&#xff0…...

PingFangSC 字体技术深度解析:现代Web字体架构实践指南

PingFangSC 字体技术深度解析&#xff1a;现代Web字体架构实践指南 【免费下载链接】PingFangSC PingFangSC字体包文件、苹果平方字体文件&#xff0c;包含ttf和woff2格式 项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC PingFangSC&#xff08;苹方-简&#…...