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, "12") // 不能出现-01,-02类似

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

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

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

value = value.replace(/^(\-)*(\d+)\.(\d\d).*/, "12.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

},

相关推荐
换日线°6 分钟前
前端炫酷展开效果
前端·javascript·vue
CappuccinoRose1 小时前
React框架学习文档(七)
开发语言·前端·javascript·react.js·前端框架·reactjs·react router
Hi_kenyon1 小时前
Ref和Reactive都是什么时候使用?
前端·javascript·vue.js
小小测试开发2 小时前
UI自动化测试:CSS定位方式超详细解析(附实战示例)
css·ui·tensorflow
摇滚侠2 小时前
【程序员入门系列】jQuery 零基础入门到精通!Jquery 选择器 API
前端·javascript·jquery
im_AMBER2 小时前
Leetcode 111 两数相加
javascript·笔记·学习·算法·leetcode
止观止3 小时前
告别 require!TypeScript 5.9 与 Node.js 20+ 的 ESM 互操作指南
javascript·typescript·node.js
zhougl9963 小时前
Vue 中使用 WebSocket
前端·vue.js·websocket
光影少年4 小时前
智能体UI ux pro max
前端·ui·ux
酒鼎4 小时前
学习笔记(7-01)函数闭包
javascript