对input输入框的正则限制

embedded/2024/9/24 12:31:46/

一、0-100的整数

正则: 

javascript">const inputRules = ref([{required: false,trigger: "blur",validator: (rule, value, callback) => {const reg = /^[0-9]+$/; // 只允许整数if ((0 <= value && value <= 100 && reg.test(value)) ||value == "" ||value == undefined) {callback();} else {callback(new Error("请输入0-100之间的整数"));}},},
]);

html: 

javascript"> <el-form-item label="值" ><div><el-button :disabled="queryParams.valveRateMin <= 0" @click="queryParams.valveRateMin =Number(queryParams.valveRateMin) - 1" style="width: 32px"><el-icon><Minus /></el-icon></el-button></div><div style="width: 60%; margin: 0 4px"><el-form-item label="" label-width="0" prop="valveRateMin" :rules="inputRules"><el-input v-model="queryParams.valveRateMin" placeholder="请输入"></el-input></el-form-item></div><div><el-button :disabled="queryParams.valveRateMin >= 100" @click="queryParams.valveRateMin =Number(queryParams.valveRateMin) + 1" style="width: 32px"><el-icon><Plus /></el-icon></el-button></div></el-form-item>

如图: 

二、-10至10的整数

javascript">const inputRules = ref([{required: false,trigger: "blur",validator: (rule, value, callback) => {const reg = /^-?\d+$/; // 允许负数和正整数if ((-10 <= value && value <= 10 && reg.test(value)) ||value == "" ||value == undefined) {callback();} else {callback(new Error("请输入-10-10之间的整数"));}},},
]);

 三、0-100允许一位小数

javascript">const inputRules = ref([{required: false,trigger: "blur",validator: (rule, value, callback) => {const reg = /^[-]?[0-9]+(\.[0-9]{1,1})?$/;if ((0 <= value && value <= 100 && reg.test(value)) ||value == "" ||value == undefined) {callback();} else {callback(new Error("请输入0-100之间且最多保留一位小数的数"));}},},
]);

如果保留两位小数

javascript">   const reg = /^[-]?[0-9]+(\.[0-9]{1,2})?$/;

以此类推。。。

三位:   const reg = /^[-]?[0-9]+(\.[0-9]{1,3})?$/;


http://www.ppmy.cn/embedded/51089.html

相关文章

SpringBoot测试实践

测试按照粒度可分为3层&#xff1a; 单元测试&#xff1a;单元测试&#xff08;Unit Testing&#xff09;又称为模块测试 &#xff0c;是针对程序模块&#xff08;软件设计的最小单位&#xff09;来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中…

Google trend搜索关键词

Google trend地址&#xff1a;https://trends.google.com/trends/?geoUS&hlzh-CN 1、具体的操作步骤如下&#xff1a; 2、Google trend搜索页面如下&#xff1a;

【Apache Doris】周FAQ集锦:第 7 期

【Apache Doris】周FAQ集锦&#xff1a;第 7 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目&#xff01; 在这个栏目中&#xff0c;每周将筛选社区反馈的热门问题和话题&#xff0c;重点回答并进行深入探讨。旨在为广大用户和…

PHP表单设计:确保必需字段完整性的最佳实践

在开发网页应用程序时&#xff0c;设计一个具有必需字段的PHP表单是至关重要的。必需字段是用户提交表单时必须填写的信息&#xff0c;它们对于确保数据完整性和准确性至关重要。本文将从多个方面讨论如何在PHP表单中设计必需字段&#xff0c;并探讨确保表单数据完整性的最佳实…

Web开发技能树-HTML-class/id/name/tag

1 需求 需求1&#xff1a;CSS查找HTML元素 *tagclassid派生选择器 需求2&#xff1a;JavaScript查找HTML元素 通过id找到HTML元素&#xff1a;document.getElementById()通过标签名找到HTML元素&#xff1a;getElementsByTagName()通过类名找到HTML元素:document.getElemen…

Rust 1.79.0发布

Rust 1.79.0发布 &#xff0c;此版本中的一些主要新功能和改进&#xff1a; 内联 const 表达式 内联表达式&#xff08;例如块&#xff09;现在在表达式位置上是稳定的&#xff0c;允许显式输入 const 上下文而无需额外声明。这使得涉及常量的代码更加简洁和可读&#xff0c;尤…

自学新标日第十六课(完结)

第十六课 单词 单词假名声调词义操作そうさ1操作&#xff0c;操纵機械きかい2&#xff0c;1机械&#xff0c;机器旅行会社りょこうがいしゃ4旅行社営業部えいぎょうぶ3营业部アイティー産業アイティーさんぎょう5it产业&#xff0c;信息技术产业製品せいひん0产品建築家けんち…

使用自签名 TLS 将 Dremio 连接到 MinIO

Dremio 是一个开源的分布式分析引擎&#xff0c;为数据探索、转换和协作提供简单的自助服务界面。Dremio 的架构建立在 Apache Arrow&#xff08;一种高性能列式内存格式&#xff09;之上&#xff0c;并利用 Parquet 文件格式实现高效存储。有关 Dremio 的更多信息&#xff0c;…