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…

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;在线就可以制…

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;可视化操作不仅可以…

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

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

【C++】类和对象(中)之拷贝构造与运算符、操作符重载

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 前言 我们继续学习默认成员函数&#xff0c;本篇文…

③ 软件工程CMM、CMMI模型【软考中级-软件设计师 考点】

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ ③ 软件工程CMM、CMMI模型【软考中级-软件设计…

Android 数据恢复的顶级软件分享

人们经常向我们询问有关 Android 数据恢复软件的信息以及它们是否有用。而且&#xff0c;我们给他们讲了两个朋友的故事——凯伦和亚历克斯。他们都丢失了 Android 手机上的一些重要数据。 丢失数据确实是一个令人心碎的时刻&#xff0c;根据丢失的文件&#xff0c;可能会让您…

橙河网络:坏人是怎么形成的?

小A是一个非常热心的人&#xff0c;给谁帮忙&#xff0c;都免费。 大家都说&#xff0c;小 A&#xff0c;实在人呀&#xff0c;哈哈。 小B搬来了&#xff0c;他活多&#xff0c;弄不过来&#xff0c;常找小 A 来帮忙。 小A 每次来帮忙&#xff0c;小B 都给小A一张大团结(100…

oracle (8)Managing Tablespace Data File

目录 一、基础知识 1、表空间和数据文件 2、存储层次结构摘要 3、表空间的类型 4、表空间中的空间管理 5、临时表空间 6、Default Temporary TS 默认临时TS 二、常用实操 1、Creating Tablespaces创建表空间 2、Dictionary-Managed TS 字典管理的表空间 3、Locally …