form表单的自定义校验规则

需求:校验el-input输入为0-100的数字 

 <el-form :label-position="'top'" label-width="80px" ref="ogdiskForm" :model="originalDiskForm" :rules="rules" class="form"><el-form-item label="目标比例:(磁盘达到该比例后,将出现阈值提示)" v-if="originalDiskForm.type !== 'object'" prop="useAblePercent"><!-- @input="numValid" --><el-input v-model="originalDiskForm.useAblePercent" style="width: 270px"><template slot="append">%</template></el-input></el-form-item>
</el-form>data(){var checkPct = (rule, value, callback) => {if (!Number(value)) {if(value == 0){callback();}else{callback(new Error('请输入数字'));}} else {if (value < 0) {callback(new Error('目标比例不能小于0'));} else if(value > 100){callback(new Error('目标比例不能大于100'));} else{callback();}}}return {// 原盘符数据表单originalDiskForm: {useAblePercent: '',},rules:{useAblePercent:[{validator: checkPct, trigger: 'blur'}],}}}

不通过校验提示:

 

 

 

通过校验:

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

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

相关文章

【粉丝福利第一期】小 明

Q1 - 能否自我介绍下&#xff1f; 嗨&#xff0c;大家好&#xff0c;我是 小 明 &#xff08;小明java问道之路&#xff09;&#xff0c;互联网大厂后端研发专家&#xff0c;2022博客之星TOP3/博客专家/CSDN后端内容合伙人、InfoQ(极客时间)签约作者、阿里云签约博主、全网5万…

Python 接口测试框架

目录结构定义 首先来看一下项目整体的结构 框架结构 代码结构 Excel 文件结构 代码详细解析 1.工具包 tools 封装操作 excel 方法 excel_operation.py import xlrd from config.config import PROJECT_PATHclass OperationExcel:def __init__(self, file_nameNone, sheet_…

【精选】Java项目介绍和界面搭建——拼图小游戏 中

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

项目解决方案: 实时视频拼接方案介绍

目 录 1、实时视频拼接概述 2、适用场景 3、系统介绍 3.1拼接形式 3.1.1横向拼接 3.1.2纵向拼接 3.2前端选择 3.2.1前端类型 3.2.2推荐配置 3.3后端选择 3.3.1录像回放 3.3.2客户端展示 4、拼接方案介绍 4.1基于4K摄像机的拼接方案 4.1.1系统架构…

贪心算法练习day2

删除字符 1.题目及要求 2.解题思路 1&#xff09;初始化最小字母为‘Z’&#xff0c;确保任何字母都能与之比较 2&#xff09;遍历单词&#xff0c;找到当前未删除字母中的最小字母 3&#xff09;获取当前位置的字母 current word.charAt(i)&#xff1b; 4&#xff09;删…

vue3编写H5适配横竖屏

具体思路如下&#xff1a; 1、监听浏览器屏幕变化&#xff0c;通过监听屏幕宽高&#xff0c;辨别出是横屏&#xff0c;还是竖屏状态 在项目的起始根页面进行监听&#xff0c;我就是在App.vue文件下进行监听 代码如下&#xff1a; <template><RouterView /> <…

C语言数据结构基础—单链表相关数据结构题目6道

上一篇博客中&#xff0c;我们大致的讲解了单链表相关的各种接口。接下来我们通过例题来运用类似的思想&#xff0c;达到学以致用的目的。 1.移除链表元素 203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 没有说明头结点是什么&#xff0c;默认就是第一个元素&am…

python_可视化_交互_多条线段点击高亮显示

需求 使用matplotlib 绘制折线图 响应鼠标事件 单击折线 线条高亮显示 解决方法: 使用 mplcursors 库, 一句代码可实现. 代码 import matplotlib.pyplot as plt import mplcursors import numpy as np# 生成一些示例数据 x np.linspace(0, 10, 100) y np.sin(x)# 创建绘图…

Python复合型数据避坑指南

目录 前言 列表&#xff08;Lists&#xff09; 1. 修改可变对象 2. 浅拷贝和深拷贝 元组&#xff08;Tuples&#xff09; 集合&#xff08;Sets&#xff09; 字典&#xff08;Dictionaries&#xff09; 1. 键值唯一性 2. 键的类型 实际应用场景 1. 数据分析与清洗 2. 网络…

记忆化搜索(Function,天下第一)

Function 这是一道很直观的递归题目&#xff0c;但是使用递归会导致时间超限&#xff0c;所以需要使用记忆化搜素。 首先把坑点讲一下&#xff1a;出题人会给出负数&#xff0c;而我们知道数组下标是不能有负数的&#xff0c;如果是二维数组还可以用map数组进行储存&#xff0c…

DETR(1):论文详解

文章目录 1. DETR 模型结构2.损失函数2.1 预测结果和GT 的匹配2.2 训练的loss计算3.实验3.1 大物体表现效果好3.2 Transformer Encoder 和Decoder的作用3.3 object query4. 伪代码5. 结论

Python set 集合

Python 集合 集合&#xff08;set&#xff09;是一个无序的不重复元素序列。 集合中的元素不会重复&#xff0c;并且可以进行交集、并集、差集等常见的集合操作。 可以使用大括号 { } 创建集合&#xff0c;元素之间用逗号 , 分隔&#xff0c; 或者也可以使用 set() 函数创建…