Vue input输入限制—正整数，小数位数……

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

1、仅能输入正整数

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

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




<el-input type="text" 



          size="small" 



          v-model="xxx" 



          onkeyup="=(/\D|^0/g,'')" 



          placeholder="请输入每日完单基数">



</el-input>

2、金额，小数点后2位

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




<el-form-item>



     label="奖励金额:" 



     label-width="90px" >



     <el-input




        type="text" 



        size="small" 



        v-model="" 



        placeholder="请输入奖励金额："




        @=" = oninput(,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、

<input type="number" min=1 step=1>

html5 number类型的input框右侧自带上下箭头，我们通过min=1以及step=1限制了最小值以及每次变化的量。

但是这样仍然不满足我们的要求，因为还是可以手动输入-、.、自然对数e等，不能完全做到限制正整数

参考文章：

Vue input 限制输入正负数，小数点后保留两位_林中明月间丶-****博客

---------------------------------------------------------------------------------------------------------------------------------大家有没有较完美的限制正整数（最小为1）的方法，救救孩子吧，呜呜呜

秒客网

Vue input输入限制—正整数，小数位数……

相关文章