vue中的rules表单校验规则使用方法 :rules=“rules“

一、el-form里面必写属性值

:ref="dataForm"        // 提交表单时进行校验

:rules="rules"            // return 下的校验规则
:model="userForm"  // 绑定表单的值

<el-formref="dataForm"     // 必写属性值:rules="rules"     // 必写属性值:model="userForm"  // 必写属性值label-position="left"label-width="100px"
><el-row><el-col :span="12"><el-form-itemlabel="充值金额"prop="amount"  // 必写属性值><el-inputv-model="userForm.amount"  // 必写属性值placeholder="请输入充值金额"></el-input></el-form-item></el-col></el-row> 
</el-form>
<div slot="footer" class="dialog-footer" align="center"><el-button @click="dialogFormVisible = false">返回</el-button><el-button type="primary" @click="Recharge()" >提交</el-button>
</div>

二、:ref 提交表单时进行校验

点击提交时,会先对表单的值进行校验判断,校验通过后,再进行后续操作。

Recharge() {this.$refs['dataForm'].validate((valid) => {if (valid) {// 校验通过、调充值接口的逻辑操作}
})

三、:rules 校验规则

el-form-item 里面使用 prop 属性绑定规则

<el-form-item label="充值金额"  prop="amount"> ... ... </el-form-item>

required:显示输入框为选填或必填项;
message:提示信息;

pattern:正则表达式;

trigger:触发事件  =>  一般blur用于input、chang用于select,picker等;

data() {return { rules: {amount: [{ required: true, message: '充值金额不能为空', trigger: 'blur' },{pattern: /^\d+(\.\d{1,1})?$/,message: '金额为数字类型且最多保留1位小数',trigger: 'blur',},],},}
},

四、:model 绑定表单的值

el-input 里面使用 v-model 绑定表单值

<el-input  v-model="userForm.amount" ></el-input>

data() {return {userForm: {amount: '',}, }
},

问题:

校验未通过,关闭弹窗再打开还存在的问题:

 this.dialogFormVisible = truethis.$nextTick(() => {this.$refs['dataForm'].clearValidate()})

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

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

相关文章

CV论文阅读大合集

YearNameAreamodeldescriptiondrawback2021 ICMLClip &#xff08;Contrastive Language-Image Pre-training&#xff09;contrastive learning、zero-shot learing、mutimodel用文本作为监督信号来训练可迁移的视觉模型CLIP’s zero-shot performance, although comparable to…

Eureka处理流程

1、Eureka Server服务端会做什么 1、服务注册 Client服务提供者可以向Server注册服务&#xff0c;并且内部有二层缓存机制来维护整个注册表&#xff0c;注册表是Eureka Client的服务提供者注册进来的。 2、提供注册表 服务消费者用来获取注册表 3、同步状态 通过注册、心跳机制…

海康多相机同步取流保存图片

话不多说&#xff0c;直接上代码。代码里包含了多窗口显示图像和保存图片。 #"rtsp://admin:123456qq192.168.10.192/stream1" # rtsp://admin:Admin123192.168.100.103:554/Streaming/Channels/101 #rtsp://admin:Admin123192.168.100.103:554/cam/realmonitor?ch…

redis缓存击穿,redisson分布式锁,redis逻辑过期

什么是缓存击穿&#xff1a; 缓存击穿是指在高并发环境下&#xff0c;某个热点数据的缓存过期&#xff0c;导致大量请求同时访问后端存储系统&#xff0c;引起系统性能下降和后端存储压力过大的现象。 解决方案&#xff1a; 1. redisson分布式锁 本质上是缓存重建的过程中&…

「Verilog学习笔记」四选一多路器

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 通过波形示意图我们可以发现&#xff0c;当sel为0&#xff0c;1&#xff0c;2时&#xff0c;输出mux_out分别为d3&#xff0c;d2&#xff0c;d1&#xff0c;那么sel3…

PHP中文转拼音实现

pinyin.php 床前明月光&#xff0c;疑是地上霜。 举头望明月&#xff0c;低头思故乡 <?php /*** PHP 汉字转拼音 [包含20902个基本汉字5059生僻字]* author 楼教主(cik520qq.com)* version v1.2* note 请开启 mb_string 扩展*/var_dump(pinyin(床前明月光&#xff0c;疑是…

【Redis】的简介和安装配置(Linux和windows)及操作命令

目录 一、概述 1.介绍 2.特点 二、安配 1. 安装 2. 配置 3. 主机连接 1.Linux连接 2.windows连接 三、命令 1. 字符串(String) 2. 哈希(Hash) 3. 列表&#xff08;List&#xff09; 4. 集合&#xff08;Set&#xff09; 一、概述 1.介绍 Redis是一个开源的、基…

零代码复现-TCGA联合GEO免疫基因结合代谢基因生信套路(二)

零代码复现-TCGA联合GEO免疫基因结合代谢基因生信套路&#xff08;二&#xff09;-关键基因集的获取和生存数据准备 前面的分析中&#xff0c;下载TCGA和GEO的数据&#xff0c;并进行简单的处理&#xff0c;接下来就是相关基因集的获取和整理&#xff0c;为后期聚类和降维做准…

【PyQt学习篇 · ⑥】:QWidget - 事件

文章目录 事件消息显示和关闭事件移动事件调整大小事件鼠标事件进入和离开事件鼠标按下和释放事件鼠标双击事件鼠标按下移动事件 键盘事件焦点事件拖拽事件绘制事件改变事件右键菜单输入法 事件转发机制案例一案例二案例三 事件消息 显示和关闭事件 showEvent(QShowEvent)方法…

小白如何制作电子画册?看这里,超多画册模板任你挑!

传统纸质版的画册&#xff0c;制作起来即费力又费时&#xff0c;花费还高&#xff0c;想要修改内容还得重新制作&#xff0c;特别麻烦。现在互联网发达&#xff0c;如今已经用上了H5的技术&#xff0c;小白也能快速制作一本翻页电子画册。 只需用FLBOOK&#xff0c;在线就可以制…

git reflog 恢复git reset --hard 回退的内容

首先使用 git reflog 查看处理的历史&#xff0c;历史是由新到旧排列的&#xff0c;找到回退前的commit的id&#xff0c;找的过程可以只关注HEAD的部分&#xff0c;HEAD括号中的值越大越旧&#xff0c;越小越新。 找到后执行以下命令 git reset --hard 你的commit_id 然后…

Linux的历史与环境

目录 Linux的背景介绍 Linux的时代背景-硅谷模式 计算机发展 UNIX发展历史 Linux诞生的偶然与必然 Linux开源 Linux发行版本 搭建Linux的环境 1.直接安装在物理机上 2.使用虚拟机软件 3.使用云服务器 &#xff08;1&#xff09;购买云服务器 &#xff08;2&#x…

OceanBase:03-集群部署

目录 一、集群规划 二、配置要求 三、部署前配置 1.配置 limits.conf 2.配置 sysctl.conf 3.关闭防火墙 4.关闭 SELinux 5.创建数据目录&#xff0c;修改文件所有者信息 6.设置无密码 SSH 登录 7.安装jdk 四、解压执行安装 五、集群部署 1.OBD命令行部署 2. OBD白…

2019年408真题复盘

紫色标记是认为有一定的思维难度或重点总结 红色标记是这次刷真题做错的 记录自己对题目的一些想法与联系&#xff0c;可能并不太关注题目本身。 分数用时 选择部分 80/8036min大题部分41/7094min总分121130min 摘自知乎老哥&#xff1a;“我做历年真题时&#xff0c;绝大部分…

图数据库Neo4j——SpringBoot使用Neo4j 简单增删改查 复杂查询初步

前言 图形数据库是专门用于存储图形数据的数据库&#xff0c;它使用图形模型来存储数据&#xff0c;并且支持复杂的图形查询。常见的图形数据库有Neo4j、OrientDB等。 Neo4j是用Java实现的开源NoSQL图数据库&#xff0c;本篇博客介绍如何在SpringBoot中使用Neo4j图数据库&…

python连接clickhouse (CK)

Author: tkhywang 2810248865qq.com Date: 2023-11-01 11:28:58 LastEditors: tkhywang 2810248865qq.com LastEditTime: 2023-11-01 11:36:25 FilePath: \PythonProject02\Python读取clickhouse2 数据库数据.py Description: 这是默认设置,请设置customMade, 打开koroFileHead…

【Linux】:Linux开发工具之Linux编辑器vim的使用

&#x1f52b;1.Linux编辑器-vim使用 &#x1f4e4; vi/vim的区别简单点来说&#xff0c;它们都是多模式编辑器&#xff0c;不同的是vim是vi的升级版本&#xff0c;它不仅兼容vi的所有指令&#xff0c;而且还有一些新的特性在里面。例如语法加亮&#xff0c;可视化操作不仅可以…

CentOS操作系统的特点

CentOS操作系统的特点如下&#xff1a; 免费开源&#xff1a;CentOS是一个免费开源的操作系统&#xff0c;完全免费&#xff0c;无需花费任何成本。 稳定性高&#xff1a;CentOS以其出色的稳定性和安全性而闻名。它是一个基于Red Hat Enterprise Linux&#xff08;RHEL&#x…

FPGA_Signal TapII 逻辑分析仪 在线信号波形抓取

FPGA_Signal TapII 逻辑分析仪 在线信号波形抓取 由于一些工程的仿真文件不易产生&#xff0c;所以我们可以利用 quartus 软件自带的 SignalTap 工具对波形进行抓取 对各个信号进行分析处理&#xff0c;让电子器件与FPGA进行正常通讯工作&#xff0c;也验证所绘制的波形图是否一…

模拟实现.net中的Task机制:探索异步编程的奥秘

.net中使用Task可以方便地编写异步程序&#xff0c;为了更好地理解Task及其调度机制&#xff0c;接下来模拟Task的实现&#xff0c;目的是搞清楚&#xff1a; Task是什么Task是如何被调度的 基本的Task模拟实现 从最基本的Task用法开始 Task.Run(Action action)这个命令的作…