vue限制input只能输入正整数 保留小数点后两位

news/2024/7/9 23:39:04 标签: vue

记录正则匹配
只能输入正整数

 <a-input v-model="form.limitAmount" placeholder="1" type="number" suffix="张" onkeyup="this.value=this.value.replace(/^(0+)|[^\d]+/g,'')" />

只能输入正整数并且保留两位小数

 <a-form-model-item label="面值:" prop="couponPrice" >
     <a-input v-model="form.couponPrice" placeholder="请输入面值" suffix="元" />
 </a-form-model-item>
rules:{
 couponPrice: [{ required: true, message: '请输入面值', trigger: 'input' },
        { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确金额格式,可保留两位小数' }],

不符合条件是提示
在这里插入图片描述
或者直接用ant组件数字输入框a-input-number
利用precision API
在这里插入图片描述

  <a-input-number id="inputNumber" v-model="form.useConditionPrice" :precision="2" />

比较全面的
事件 number为双向绑定的值

@keyup.native="number = oninput(number)"

方法

 oninput(num) {
      var str = num
      var len1 = str.substr(0, 1)
      var len2 = str.substr(1, 1)
      //如果第一位是0,第二位不是点,就用数字把点替换掉
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1)
      }
      //限制只能输入一个小数点
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1)
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
        }
      }
      //正则替换 限制输入框小数点位数,多出的过滤掉
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 
      return str
   },

http://www.niftyadmin.cn/n/874714.html

相关文章

ax200 黑苹果_nuc5、6、nuc7、8、nuc9、10装ax200

nuc5、nuc6、nuc7、nuc8、nuc9、nuc10安装wifi6网卡ax200上篇博文《冥王峡谷黑苹果之苹果网卡转接板选择分析》介绍了nuc是装白苹果网卡还是装wifi6网卡ax200&#xff0c;就有网友评论道&#xff0c;黑苹果可以用ax200&#xff0c;3个kext文件&#xff0c;一个无线客户端helipo…

css 文本两行显示,超出省略号表示

word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /* 这里是超出几行省略 */overflow: hidden;要实现多行文本垂直居中 单用行高 line-height: 不能满足 利用flex布局 父元素水平垂直居中 子元素行高…

python主函数参数_Python main函数、命名行参数

1&#xff0c;main函数 python是基于脚本顺序执行&#xff0c;没有main函数的概念&#xff0c;但是我们可以通过关键字 __name__来模拟。 __name__&#xff1a;模块名&#xff0c;当执行文件和当前模块一致时&#xff0c;__name__的值等于__main__。 比如有如下文件&#xff1a…

沙盘正在注销进程start_jumpserver二次开发之vpc场景下的僵死进程与mysql gone away问题的处理总结...

0x00. 前言近期在开发堡垒机的过程中遇到3个bug, 本文总结了对这3个BUG的处理过程, 以备自己或他人查阅.0x01. VPC 场景下的 僵死进程问题的处理1 . 出问题的代码相比开源版本的jumpserver 代码,上图代码中增加了对vpc的支持,通过ssh 的ProxyCommand 特性实现, 而这段代码却引出…

js利用html2canvas实现dom元素转图片下载

业务场景&#xff1a; 需要对页面进行截图保存 技术&#xff1a; JS截图插件html2canvas.js 实现在用户浏览器端直接对整个或部分页面进行截屏。 如图点击下方保存图片按钮进行上方页面转换成图片保存 首先 安装html2canvas依赖 npm install --save html2canvas在所需页面引…

python opencv local_threshold_Python+OpenCV图像处理之图像二值化实现代码

本篇文章小编给大家分享一下PythonOpenCV图像处理之图像二值化实现代码&#xff0c;文章代码介绍的很详细&#xff0c;小编觉得挺不错的&#xff0c;现在分享给大家供大家参考&#xff0c;有需要的小伙伴们可以来看看。 图像二值化就是将图像上的像素点的灰度值设置为0或255&am…

vue 一个动态链接url转成二维码

安装相关的依赖包 npm install qrcode2 --savetemplate中需要展示的容器 <div id"qrcode" ref"qrcode"></div>不要不忘了引入这个组件 components: { QRCode },在js代码中写入转换为二维码方法 //生成二维码qrcodeScan() {//这里是为了 每次…

vb.net源码获取优盘序列号_并发类 AtomicLong 使用入门及源码详解

AtomicLong 介绍AtomicLong可以原子更新的 Long 值。AtomicLong用于诸如原子递增的序列号之类的应用程序中&#xff0c;并且不能用作Long的替代品。但是&#xff0c;此类确实扩展了Number&#xff0c;以允许通过处理基于数字的类的工具和实用程序进行统一访问。API 直接查阅 JD…