vue3中简单快速的做个表单输入框验证

<el-form ref="formRef" :model="processingProgressForm"><el-form-item label="服务商名称:" :label-width="120" prop="rejectRemarks" :rules="[{ required: true, message: '服务商名称不能为空' }]"><el-input v-model="processingProgressForm.rejectRemarks" placeholder="请输入" /></el-form-item>
</el-form>
<div style="text-align: center;"><el-button type="primary" @click="addOption">确认</el-button>
</div>
const formRef = ref();//表单虚拟节点function addOption() {formEl.value.validate((val)=>{if(!val) return ElMessage.error("请输入服务商名称");})
};

说明:ref="formRef"是表单的虚拟节点

 :model="processingProgressForm"是绑定的对象

prop="rejectRemarks"要验证的属性

:rules是验证规则,可以直接写到标签上也可以写成变量

这4个属性必须要有

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

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

相关文章

通过网关访问微服务,一次正常,一次不正常 (nacos配置的永久实例却未启动导致)

微服务直接访问没问题&#xff0c;通过网关访问&#xff0c;就一次正常访问&#xff0c;一次401错误&#xff0c;交替正常和出错 负载均衡试了 路由配置检查了 最后发现nacos下竟然有2个order服务实例&#xff0c;我明明只开启了一个呀 原来之前的8080端口微服务还残留&…

基于架构的软件开发方法

基于架构的软件开发方法 基于架构的软件开发方法是由架构驱动的&#xff0c;即指由构成体系结构的商业、质量和功能需求的组合驱动的。使用ABSD 方法&#xff0c;设计活动可以从项目总体功能框架明确就开始&#xff0c;这意味着需求抽取和分析还没有完成(甚至远远没有完成)&am…

纯C#使用Visionpro工具2 操作斑点工具

结果图 通过斑点工具中非圆性找取圆特征 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.For…

ApacheCon - 云原生大数据上的 Apache 项目实践

Apache 软件基金会的官方全球系列大会 CommunityOverCode Asia&#xff08;原 ApacheCon Asia&#xff09;首次中国线下峰会将于 2023 年 8 月 18-20 日在北京丽亭华苑酒店举办&#xff0c;大会含 17 个论坛方向、上百个前沿议题。 字节跳动云原生计算团队在此次 CommunityOve…

OpenSSL 远程升级到 3.2.1

OpenSSL 远程升级到 3.2.1 文章目录 OpenSSL 远程升级到 3.2.1背景升级 OpenSSL1. 查看 OpenSSL版本2. 下载最新稳定版本 OpenSSL3. 解压缩&#xff0c;安装4. 配置 背景 最近的护网行动&#xff0c;被查出来了好几个关于OpenSSH的漏洞。需要升级OpenSSH&#xff0c;升级OpenS…

冠达管理:价格破发是什么意思啊?

价格破发是股票商场中一个比较常见的术语&#xff0c;也是常常让出资者感到困惑的现象之一。价格破发是指新股发行后&#xff0c;由于各种原因&#xff0c;股票价格低于发行价的现象。那么&#xff0c;价格破发的原因是什么呢&#xff1f;价格破发与出资者有哪些联系呢&#xf…

C和指针(一)

C和指针&#xff08;一&#xff09; 预处理指令main 函数常量及变量整型字面值指针&#xff1a;基本声明&#xff1a;隐式声明&#xff1a;常量&#xff1a; 预处理指令 预处理器用库函数头文件的内容替换掉相对应的#include指令语句。 使用stdio.h头文件可以使我们访问标准I/…

企业直播MR虚拟直播(MR混合现实直播技术)视频介绍

到底什么是企业直播MR虚拟直播&#xff08;MR混合现实直播技术&#xff09;&#xff1f; 企业直播MR虚拟直播新玩法&#xff08;MR混合现实直播技术&#xff09; 我的文章推荐&#xff1a; [视频图文] 线上研讨会是什么&#xff0c;企业对内对外培训可以用线上研讨会吗&#x…

24届近5年南京工业大学自动化考研院校分析

今天给大家带来的是南京工业大学控制考研分析 满满干货&#xff5e;还不快快点赞收藏 一、南京工业大学 学校简介 南京工业大学&#xff08;Nanjing Tech University&#xff09;&#xff0c;简称“南工”&#xff0c;位于江苏省南京市&#xff0c;由国家国防科技工业局、住…

2023年之我拿起“java“

持续更新中………… 文章目录 javajava基础 了解 j a v a 的语法&#xff0c;从 H e l l o W o r l d 开始 \color{red}{了解java的语法&#xff0c;从HelloWorld开始} 了解java的语法&#xff0c;从HelloWorld开始 j a v a 语言的注释 \color{red}{java语言的注释} java语言的…

Vue3.2+TS的defineExpose的应用

defineExpose通俗来讲&#xff0c;其实就是讲子组件的方法或者数据&#xff0c;暴露给父组件进行使用&#xff0c;这样对组件的封装使用&#xff0c;有很大的帮助&#xff0c;那么defineExpose应该如何使用&#xff0c;下面我来用一些实际的代码&#xff0c;带大家快速学会defi…

VSCode 报错 grep: /proc/version: 权限不够

部分用户在Linux上运行VSCode提示grep: /proc/version: 权限不够 grep: /proc/version: 权限不够 You are trying to start Visual Studio Code as a super user which isn’t recommended. If this was intended, please add the argument --no-sandbox and specify an alter…

GPT带我学-设计模式-命令模式

1 你知道设计模式的命令模式吗 是的&#xff0c;我知道设计模式中的命令模式。命令模式是一种行为型设计模式&#xff0c;它将请求封装成一个对象&#xff0c;从而允许使用不同的请求、队列或日志来参数化其他对象。命令模式还支持撤销操作&#xff0c;并且可以提供事务的实现…

探讨uniapp的网络通信问题

uni-app 中有很多原生的 API&#xff0c;其中我们经常会用到的肯定有&#xff1a;uni.request(OBJECT) method 有效值 注意&#xff1a;method有效值必须大写&#xff0c;每个平台支持的method有效值不同&#xff0c;详细见下表。 success 返回参数说明 data 数据说明 最终…

气液固三相线识别—Langmuir部分复现

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material

c#和pdf.js实现分片预览pdf

源码如下&#xff1a; /// <summary>/// 文件处理/// </summary>[RoutePrefix("api/fs")]public class FileStoreController : ApiController{/// <summary>/// 文件预览/// </summary>/// <param name"filepath">文件路径…

【数据结构OJ题】移除链表元素

原题链接&#xff1a;https://leetcode.cn/problems/remove-linked-list-elements/description/ 1. 题目描述 2. 思路分析 我们可以定义一个结构体指针变量cur&#xff0c;让cur一开始指向头结点&#xff0c;同时定义一个结构体指针prev&#xff0c;令prev初始化为空指针NULL…

基于长短期神经网络LSTM的碳排量预测,基于LSTM的碳排放量预测

目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 基于长短期神经网络LSTM的碳排放量预测 完整代码: 基于长短期神经网络LSTM的碳排放量预测,基于LSTM的碳排放量预测资源-CSDN文库 https://download.csdn.net/download/abc991835105/88184632 效果图 结果分析 展望 参考论文 背…

DIP:《Deep Image Prior》经典文献阅读总结与实现

文章目录 Deep Image Prior1. 方法原理1.1 研究动机1.2 方法 2. 实验验证2.1 去噪2.2 超分辨率2.3 图像修复2.4 消融实验 3. 总结 Deep Image Prior 1. 方法原理 1.1 研究动机 动机 深度神经网络在图像复原和生成领域有非常好的表现一般归功于神经网络学习到了图像的先验信息…