当前位置: 首页 > Web前端 > JavaScript

el-input限制数字(小数)的输入

时间:2023-03-27 10:51:30 JavaScript

要求:input输入框只能输入纯数字和小数。保留小数点后几位不限废话:参考了很多解决方案,都不能满足我目前的业务需求,所以做一个记录思路:监听输入事件,然后过滤出值不符合正则表达式要求的。可以//limit-function.js文件从“vue”导入Vue;让v=newVue();exportdefault{/***只能输入数字(小数点)*/inputDigit(value){//定义一个正则表达式:只接受如下形式example:3.12355.1354//这个正则表达式不限制小数点的长度让digitReg=/^\d+(\.\d+)?$/;//第1步:将输入值一个一个地分成字符letstrList=value.split("");让newValue="";//第二步:遍历字符数组,判断每个字符是否满足期望for(letitemofstrList){if(isNaN(item-0)){if(item==="."){newValue+=item;}}elseif(/\d/g.test(item)){newValue+=item;}}//Step3:pair已经满足最终格式校验的预期字符//因为可能有多个小数点比如2.323.32..所以需要再次校验if(!digitReg.test(newValue)){让strs=newValue.split(".");如果(strs.length>1){newValue=strs[0]+"."+strs[1];}}返回新值;}}methodusedinvue2component//将这个limit-function绑定到main.js中的vue原型对象,全局使用importlimitfrom"./utils/limit-fuction";Vue.prototype.$limit=limit;(obj.num=$limit.inputDigit(e))">