vue element ui input 正整数 vue只能输入正整数

转载

柳随风 2024-03-26 22:39:37

文章标签 vue.js 前端 javascript html5 输入框 文章分类 机器学习人工智能

最近一个需求，因为数据比较多，提测时各种输入框限制的bug反馈回来，快要气死了，把我遇到的做个总结，以后再遇到也能参考一下……

1、仅能输入正整数

在input里加入onkeyup那一行代码即可，这样无论怎么输入汉字字母还是符号什么的都输入不进去，哪怕是数字，单输入0或者0.xxxx也一样输入不进去，只有输入正整数才可以。（公司电脑上没有软件不然就录屏转GIF放出来了，可以参考）

小bug：当长按0的时候可以输入一堆0，违背了正整数，目前还没有找到非常完美的写法，请大家补充。

<el-input type="text" 
          size="small" 
          v-model="xxx" 
          onkeyup="this.value=this.value.replace(/\D|^0/g,'')" 
          placeholder="请输入每日完单基数">
</el-input>

2、金额，小数点后2位

既然是金额了，那肯定是大于0的，这就不用说了，同上面差不多，无论是怎么输入汉字字母还是符号什么的都输入不进去，只有数字才可以，不同的是这里是可以输入0.xx的，当然只能输入2位小数，再多也不会显示的。在input里加个@keyup.native="item.rewardVal = oninput(item.rewardVal,2)"加红色的部分是v-model的绑定值，记得修改。

<el-form-item>
     label="奖励金额:" 
     label-width="90px" >
     <el-input
        type="text" 
        size="small" 
        v-model="item.rewardVal" 
        placeholder="请输入奖励金额："
        @keyup.native="item.rewardVal = oninput(item.rewardVal,2)">
     </el-input>
 </el-form-item>

//js，写在methods里
oninput(val,limit = 0) {
            val = val.replace(/[^\d.]/g, ""); //保留数字
            val = val.replace(/^00/, "0."); //开头不能有两个0
            val = val.replace(/^\./g, "0."); //开头为小数点转换为0.
            val = val.replace(/\.{2,}/g, "."); //两个以上的小数点转换成一个
            val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); //只保留一个小数点
            /^0\d+/.test(val) ? val = val.slice(1) : ''; //两位以上数字开头不能为0
            const str = '^(\\d+)\\.(\\d{' + limit + '}).*$'
            const reg = new RegExp(str)
            if (limit === 0) {
                // 不需要小数点
                val= val.replace(reg, '$1')
            } else {
                // 通过正则保留小数点后指定的位数
                val= val.replace(reg, '$1.$2')
            }
            return val
        },

3、