非负数、0和正整数 限制最大值且保留两位小数在elementpuls表单中正则验证

news2024/12/23 22:27:24

在这里插入图片描述
一、结构

<el-form-item label="单价:" prop="price">
            <el-input
              v-model.trim="formData.price"
              placeholder="请输入"
              @blur="formMethod.fixTwo"
            ><template #append>()</template></el-input>
          </el-form-item>

二、验证方法:

//@blur="formMethod.fixTwo"的方法保证两位小数
fixTwo:(val)=>{
    let centerNum = Number(val.target.value)
    if(val.target.value == 0 || val.target.value == "0"){
        val.target.value == 0
    }else if(centerNum >= 0){
      val.target.value = centerNum.toFixed(2)
    }
  },

// 验证0和正整数
var numberMethod=(rule, value, callback)=>{
   const reg = /^[0-9]+$/;
  if (!value) {
    callback(new Error('请输入'))
  } else {
    if (reg.test(value)) {
      if(value > 9999999.99){
        callback(new Error('数字最大不得超过9999999.99'))
      }
      callback()
    } else {
      callback(new Error('请输入正确数字'))
    }
  }
}


// 验证非负数(0+正数)
var priceMethod=(rule, value, callback)=>{
  const reg = /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/; //非负数/^\d+.?\d{0,2}$/;
  if (!value) {
    callback(new Error('请输入'))
  } else if (!Number(value) && value!="0"&&value!=0) {
    callback(new Error('请输入数字值'))
  } else {
    if (reg.test(value)) {
      if(value > 9999999.99){
        callback(new Error('数字最大不得超过9999999.99'))
      }
      callback()
    } else if(Number(value) ==0){
      callback()
    } else {
      callback(new Error('请输入正确数字'))
      // callback(new Error('小数点后最多只能输入两位'))
    }
  }
}

三、在elementplus表单验证中调用验证方法:

rules: {
    number:[{ required: true, validator: numberMethod, trigger: 'blur' }],// 数量 0+正整数
    price: [{ required: true, validator: priceMethod, trigger: 'blur' }],// 价格 非负数
    amount:[{ required: true, validator: priceMethod, trigger: 'blur' }],// 金额 非负数
    remark:[
      { required: true, message: "请输入", trigger: "blur" },
      {
        min: 1,
        max: 100,
        message: "长度在 1 到 100 个字符",
        trigger: "blur",
      },
    ],
  },

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

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

相关文章

基础算法:离散化(C++实现)

文章目录 1. 离散化的定义2. 离散化例题2.1 离散化二分2.2 离散化哈希表 1. 离散化的定义 离散化是一种在程序设计和算法优化中常用的技术&#xff0c;其核心思想是将无限空间中有限的个体映射到有限的空间中去&#xff0c;以此提高算法的时空效率。具体来说&#xff0c;离散化…

Docker 安装 GitLab教程

本章教程,主要介绍如何在Docker 中安装GitLab。 GitLab 是一个开源的 DevOps 平台,提供了一整套工具,用于软件开发生命周期的各个阶段,从代码管理到 CI/CD(持续集成和持续交付/部署),再到监控和安全分析。 一、拉取镜像 docker pull gitlab/gitlab-ce:latest二、创建 G…

【React】探讨className的正确使用方式

文章目录 一、className的正确用法二、常见错误解析三、实例解析四、错误分析与解决五、注意事项六、总结 在React开发中&#xff0c;正确使用className属性对组件进行样式设置至关重要。然而&#xff0c;由于JavaScript和JSX的特殊性&#xff0c;开发者常常会犯一些小错误&…

ShardingSphere实战(2)- 水平分表

上篇博客&#xff0c;我们讲了 ShardingSphere实战&#xff08;1&#xff09;- 分库分表基础知识&#xff0c;这篇博客&#xff0c;正式开始实操。 项目环境&#xff1a; JDK11 MySQL 8.0.30 Springboot 2.7.4 Mybatis ShardingSphere HikariCP 连接池 一、Maven 依赖 <…

filebeat发送日志

filebeat: 1.可以在本机收集日志 2.也可以远程收集日志 3.轻量级的日志收集系统&#xff0c;可以在非Java环境运行 logstash是在jvm环境中运行&#xff0c;资源消耗很高&#xff0c;启动一个logstash需要消耗500M左右的内存 filebeat只消耗10M左右的内存 test3是装有logstash的…

C语言的内存布局

根据 C 语言的内存布局规律&#xff0c;通常局部变量和全局变量哪一个的地址更小&#xff1f; 答&#xff1a;如图所示。 下面代码中&#xff0c;为何两个不同的变量可以存放在同一个地址上&#xff1f; #include <stdio.h> void func1(void); void func2(void); voi…

安装 qcloud-python-sts 失败 提示 gbk codecs decode byte 应该如何解决

安装 qcloud-python-sts 失败 提示 gbk codecs decode byte 应该如何解决 解决方案&#xff1a; 将windows 修改为utf-8编码格式 解决步骤如下&#xff1a; 1. 进入控制台 2. 点击区域 4. 点击管理 4.勾选UTF-8 5.重启系统即可

Java零基础之多线程篇:线程间如何通信?

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

计算机技术基础 (bat 批处理)Note6

计算机技术基础 &#xff08;bat 批处理&#xff09;Note6 本节主要讲解FOR命令语句&#xff08;循环&#xff09;在 bat 批处理中的使用 (part 2) 变量延迟 命令语句 在没有开启变量延迟的情况下&#xff0c;批处理命令行中的变量改变&#xff0c;必须到下一条命令才能体现…

C++ STL在算法题中的常用语法

Vector 1.将vector<int>中的元素全部置换为0 fill(vec.begin(), vec.end(), 0); 2.vector容器是可以直接用比较是否值等的&#xff01; Unordered_set 1. unordered_set的删除&#xff08;count的值也会减少&#xff09; 2.unordered_map中的int默认值是0&#xff0c;…

Prometheus-v2.45.0+Grafana+邮件告警

目录 普罗米修斯监控架构介绍 Prometheus 监控架构 1. 数据抓取&#xff08;Scraping&#xff09; 2. 时序数据库&#xff08;TSDB&#xff09; 3. 数据模型 4. PromQL 查询语言 5. 告警&#xff08;Alerting&#xff09; 6. Alertmanager 7. 可视化&#xff08;Visu…

从0开始搭建vue + flask 旅游景点数据分析系统( 六):搭建后端flask框架

这一期开始开发header部分&#xff0c;预期实现两个目标&#xff1a; 创建 Flask 项目导入旅游数据后端实现旅游数据的查询 1 python 环境 & 开发环境 python 安装和pycharm安装需要去网上找包&#xff0c;建议python使用3.8 或者3.9版本 2 新建项目 我们新建一个文件…

Kafka详解以及常见kafka基本操作

1、 kafka 是什么,有什么作用 Kafka是一个开源的高吞吐量的分布式消息中间件&#xff0c;对比于缓冲和削峰&#xff1a;上游数据时有突发流量&#xff0c;下游可能扛不住&#xff0c;或者下游没有足够多的机器来保证冗余&#xff0c;kafka在中间可以起到一个缓冲的作用&#x…

Qt项目——文本编辑器(Bug/疑问)

项目地址&#xff1a;GitHub - Outlier9/CatEditor: Cat文本编辑器--Qt 有帮助的话各位点点 star 啦&#xff0c;感谢&#xff01; 如果有需要学习该项目的人&#xff0c;觉得看文档较为困难&#xff0c;可以加我联系方式&#xff0c;给github点个star后可免费提供学习视频&…

红酒与烹饪:美食的灵感之源

在烹饪的广阔天地中&#xff0c;红酒常常作为一道神秘的佐料&#xff0c;为菜肴带来别样的风味与深度。当定制红酒洒派红酒&#xff08;Bold & Generous&#xff09;与烹饪艺术相遇&#xff0c;一场美食的灵感之旅便悄然展开。 一、红酒与烹饪的浪漫邂逅 在烹饪的世界里&…

12月长沙学术会议:EI检索,机器人、自动化与智能控制方向

在春意盎然、生机勃勃的四月&#xff0c;全球科技界的目光聚焦于中国长沙&#xff0c;这里即将迎来一场科技与智慧碰撞的盛宴——第四届机器人、自动化与智能控制国际会议&#xff08;ICRAIC 2024&#xff09;。本次盛会由历史悠久、文化底蕴深厚的湖南第一师范学院荣耀主办&am…

正点原子imx6ull-mini-Linux驱动之platform设备驱动实验(14)

我们在前面几章编写的设备驱动都非常的简单&#xff0c;都是对IO进行最简单的读写操作像I2C、 SPI、LCD 等这些复杂外设的驱动就不能这么去写了&#xff0c;Linux 系统要考虑到驱动的可重用性&#xff0c;因此提出了驱动的分离与分层这样的软件思路&#xff0c;在这个思路下诞生…

QtQuick Text-文本样式

属性 Text项目的style属性可以设置文本的样式。 支持的文本样式有&#xff1a; Text.Normal&#xff08;默认&#xff09;Text.OutlineText.RaisedText.Sunken 示例 import QtQuickRow{spacing: 10padding: 10Text {font.pointSize: 40text: "Normal"}Text {font…

太阳光大约8分钟到达地球?太阳光:我一瞬间就到了!

我们常常听说,太阳光从太阳出发,需要8分钟才能抵达地球。这个时间听起来并不长,但它却是光子在宇宙空间中以惊人速度穿行的见证。 不过,这个8分钟的时间概念,实际上是站在我们地球观察者的角度来说的。如果我们换一个角度,比如说,从光子自己的视角来看待这段旅程,又会是…

2-53 基于matlab的15种图像纹理特征计算

基于matlab的15种图像纹理特征计算。纹理特征包括小梯度优势 T1、大梯度优势 T2、 灰度分布的不均匀性 T3、 梯度分布的不均匀性 T4 、能量 T5、灰度平均 T6、梯度平均 T7、灰度均方差 T8 、梯度均方差 T9、相关 T10 、灰度熵 T11、梯度熵 T12 、 混合熵 T13、惯性 T14 、 逆差…