form表单的自定义校验规则

news2025/2/25 0:14:21

需求:校验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.coloradmin.cn/o/1477802.html

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

相关文章

FLask会话技术和Flask模板语言

二、FLask会话技术和Flask模板语言 1.会话技术 cookie 客户端的会话技术&#xff1a;让服务器认识浏览器&#xff0c;常用于登录 cookie本身由浏览器保存&#xff0c;通过Response将cookie写到浏览器上&#xff0c;下一次访问&#xff0c;浏览器会根据不同的规则携带cookie过…

搭建LNMP架构 (下载nginx mysql PHP 论坛软件)

PHP(Hypertext Preprocessor 超文本预处理器)是通用服务器端脚本编程语言&#xff0c;主要用于web开发实现动态web页面&#xff0c;也是最早实现将脚本嵌入HTML源码文档中的服务器端脚本语言之一。同时&#xff0c;php还提供了一个命令行接口&#xff0c;因此&#xff0c;其也可…

抖音商品详情数据API接口采集(属性,主图,价格,sku等)item_get-获得抖音商品详情

item_get-获得抖音商品详情 douyin.item_get 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥WeChat18305163218api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_search,i…

Codeforces Round 929 (Div. 3)题解

A. Turtle Puzzle: Rearrange and Negate&#xff08;Problem - A - Codeforces&#xff09; 题目大意&#xff1a;现有一个数组a[]&#xff0c;我们需要执行两个操作&#xff0c;首先将原数组按照任意顺序排序&#xff08;当然也可以不排序&#xff09;&#xff0c;然后选择一…

Selenium操作360浏览器

Selenium操作360浏览器 1. 查看当前使用的360浏览器内核chrome是哪个版本&#xff1a; 2. 下载对应的chromedriver https://chromedriver.chromium.org/downloads 3. demo # 打开360浏栏器 from selenium import webdriver import contextlib options webdriver.ChromeOpt…

单词规律00

题目链接 单词规律 题目描述 注意点 pattern只包含小写英文字母s只包含小写英文字母和 ’ ’s不包含任何前导或尾随对空格s中每个单词都被 单个空格 分隔 解答思路 本题与上一次同构字符串类似&#xff0c;思路可以参照同构字符串 代码 class Solution {public boolean …

华为云项目部署

前端部署 将dist文件夹下的内容拷贝到/usr/local/nginx/html下 #启动脚本是在 # /usr/local/nginx/sbin/nginx #启动 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #停止 /usr/local/nginx/sbin/nginx -s stop #重载 /usr/local/nginx/sbin/nginx -s rel…

对猫毛过敏还能养猫吗?宠物空气净化器帮你缓解猫毛过敏

很多人都知道&#xff0c;猫咪会掉毛。然而&#xff0c;像猫狗这样的宠物可能会成为一些病毒的传播源&#xff0c;对于对空气质量要求很高的朋友来说&#xff0c;这可能会导致过敏。此外&#xff0c;如果猫咪的排泄物等不及时清理&#xff0c;也可能会导致环境质量下降&#xf…

如何在Linux系统Docker部署Wiki.js容器并结合内网穿透实现远程访问本地知识库

文章目录 1. 安装Docker2. 获取Wiki.js镜像3. 本地服务器打开Wiki.js并添加知识库内容4. 实现公网访问Wiki.js5. 固定Wiki.js公网地址 不管是在企业中还是在自己的个人知识整理上&#xff0c;我们都需要通过某种方式来有条理的组织相应的知识架构&#xff0c;那么一个好的知识整…

Django官网项目

项目准备 使用VSCODE做IDE。 检查Python版本。 sudo apt install sudo apt update python3 --version创建项目路径&#xff0c;创建虚拟环境&#xff0c;创建项目 路径 \mysite 进入路径&#xff0c;运行VSCODE 运行 "code ." 创建虚拟环境。 选择 >python: c…

【力扣hot100】刷题笔记Day15

前言 今天要刷的是图论&#xff0c;还没学过&#xff0c;先看看《代码随想录》这部分的基础 深搜DFS理论基础 深搜三部曲 确认递归函数、参数确认终止条件处理目前搜索节点出发的路径 代码框架 void dfs(参数) {if (终止条件) {存放结果;return;}for (选择&#xff1a;本节点…

11.以太网交换机工作原理

目录 一、以太网协议二、以太网交换机原理三、交换机常见问题思考四、同网段数据通信全过程五、跨网段数据通信全过程六、关键知识七、调试命令 前言&#xff1a;在网络中传输数据时需要遵循一些标准&#xff0c;以太网协议定义了数据帧在以太网上的传输标准&#xff0c;了解以…

详细讲解:文物预防性保护解决方案的目标

一、文物预防性保护方案的系统目标 可移动文物预防性保护监测与调控系统,是博物馆开展科学、有效的预防性保护策略的关键工程&#xff0c;整套系统包括监测系统平台建设、调控设备部署、数据传输设备部署和环境数据监测设备安装工程。项目完成时将达到以下目标: 1)构建覆盖全…

如何在群晖NAS中开启FTP服务并实现公网环境访问内网服务

文章目录 1. 群晖安装Cpolar2. 创建FTP公网地址3. 开启群晖FTP服务4. 群晖FTP远程连接5. 固定FTP公网地址6. 固定FTP地址连接 本文主要介绍如何在群晖NAS中开启FTP服务并结合cpolar内网穿透工具&#xff0c;实现使用固定公网地址远程访问群晖FTP服务实现文件上传下载。 Cpolar内…

Flutter 数据持久化存储之Hive库

Flutter 数据持久化存储之Hive库 前言正文一、配置项目二、UI① 增加UI② 显示和删除UI 三、使用Hive① 初始化Hive② TypeAdapter自定义对象③ 注册TypeAdapter③ CURD 四、源码 前言 在Flutter中&#xff0c;有多种方式可以进行数据持久化存储。以下是一些常见的方式&#xf…

linux下查看某个命令在哪里个安装包程序下,以ifconfig命令举例子

yum list | grep net-tools &#xff08;查看yum安装列表中有没有安装指定的软件工具&#xff09;

Leetcoder Day29| 贪心算法part03

1005.K次取反后最大化的数组和 给定一个整数数组 A&#xff0c;我们只能用以下方法修改该数组&#xff1a;我们选择某个索引 i 并将 A[i] 替换为 -A[i]&#xff0c;然后总共重复这个过程 K 次。&#xff08;我们可以多次选择同一个索引 i。&#xff09; 以这种方式修改数组后&a…

Fast admin改变对话框的文字,并且绑定参数,确认和取消都可以做修改

需求&#xff1a;点击确认和拒绝都要做出对应的操作 列表添加一个buttos按钮用来单击触发对话框 {field: operate, title: __(Operate), table: table, events: Table.api.events.operate, buttons: [{name: click,title: __(点击执行事件),classname: btn btn-xs btn-info bt…

逆变器专题(6)-正负序分离(二阶广义积分器DSOGI)

相应仿真原件请移步资源下载 DSOGI作为一种常用的正负序分离方法&#xff0c;其可以在电压三相不平衡的状态下实现较为精准的锁相环。 原理 构建基于二阶广义积分器的自适应滤波器来实现90相角偏移和谐波的滤除。 其中&#xff0c;&#xff0c;表示原信号进行滞后90&#xff…

成功解决IndexError: Target 20 is out of bounds.

【PyTorch】成功解决IndexError: Target 20 is out of bounds. &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到您…