快捷处理el-input输入限制只能数字和小数问题

2,088 阅读1分钟
第1种

验证只能输入数字

onkeyup="value=value.replace(/\D|^0/g,'')" //正整数
onkeyup="value=value.replace(/[^\d]/g,'')"// 0 跟正整数

验证只能输入数字和小数,小数且只能输入2位,第一位不能输入小数点

oninput="value=value.replace(/[^\d.]/g, '').replace(/.{2,}/g, '.').replace('.', '$#$').replace(/./g, '').replace('$#$', '.').replace(/^(-)*(\d+).(\d\d).*$/, '$1$2.$3').replace(/^./g, '')"
第2种

用element ui 自带的只能输入数字,且只有2位小数

//如需要输入整数去掉precision就可
<el-input-number
    v-model="xxx"
    auto-complete="off"
    :precision="2"  //只能输入2位小数
    :controls="false"  //去掉按钮
></el-input-number>
第3种

在我们 el-input 里面加个点击事件 @keydown.native="handleInput2"

在 methods 定义 比较简单 用正则表达式过滤

  handleInput2(e) {
    // 通过正则过滤小数点后两位
    e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
  },

作者:坏人_哒
链接:www.jianshu.com/p/1d88cceee… 来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。