Element ui input 限制只能输入数字,且只能有两位小数

<el-form-item label="整体进度:" prop="number">

<el-input v-model="formInline.number" @input="handleInput" placeholder="百分比" clearable></el-input>%

</el-form-item>
//element ui input 限制只能输入数字,且只能有两位小数

handleInput (value) {

value = value

.replace(/[^\-\d.]/g, "") //将非数字和点以外的字符替换成空

.replace(/^\./g, "") //验证第一个字符是数字而不是点

.replace(/\.{2,}/g, ".") //出现多个点时只保留第一个

.replace(/(-)\./g, "$1") // -后面不能输入.

.replace(/\-{2,}/g, "-") // -只能保留一个

.replace(/(\d+|\.)-/g, "$1") // 数字和.后面不能接-,不能出现类似11-, 12.-

.replace(/-(0){2,}/g, "$1") // 不能出现-00,-001,-0001类似

.replace(/(-)0+(\d+)/g, "$1$2") // 不能出现-01,-02类似

.replace(".", "#") // 1、将数字的点替换成复杂字符#

.replace(/\./g, "") // 2、将字符串的点直接清掉

.replace("#", "."); // 3、将复杂字符再转换回点

value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数

if (value.indexOf(".") < 0 && value != "" && value != "-") {

value = parseFloat(value);

} else if (value.indexOf(".") > 1 && value[0] === "0") {

value = parseFloat(value);

}

this.formInline.number = value

},

相关推荐
GDAL24 分钟前
better-sqlite3之exec方法
javascript·sqlite
匹马夕阳1 小时前
基于Canvas和和原生JS实现俄罗斯方块小游戏
javascript·canva可画
m0_616188491 小时前
Vue3 中 Computed 用法
前端·javascript·vue.js
六个点1 小时前
图片懒加载与预加载的实现
前端·javascript·面试
weixin_460783871 小时前
Flutter解决TabBar顶部页面切换导致页面重载问题
android·javascript·flutter
逍遥客.2 小时前
uniapp对接打印机和电子秤
javascript·vue.js·uni-app
小沙盒2 小时前
godot在_process()函数实现非阻塞延时触发逻辑
javascript·游戏引擎·godot
Moment2 小时前
前端 社招 面筋分享:前端两年都问些啥 ❓️❓️❓️
前端·javascript·面试
Moment2 小时前
一坤时学习 TS 中的装饰器,让你写 NestJS 不再手软 😏😏😏
前端·javascript·面试
枣仁_3 小时前
大型语言模型(LLM)深度解析
前端·javascript·面试