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

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

 <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
   },
  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值