el-input限制只能输入数字,且保留2位小数

实现功能

1.必须为数字

2.只能有一个小数点

3.小数点后保留两位小数

4.当第一位输入小数点的时候自动补全,补为 0.

5.除非是小数,否则数字不能以0开头

html

html 复制代码
  <el-input v-model="dialogFromDate.requiredDuration" @input="requiredDurationEvent($event)" placeholder="名字"></el-input>

js

javascript 复制代码
 requiredDurationEvent(value){
            let dat =
            ("" + value) // 第一步:转成字符串
            .replace(/[^\d^\.]+/g, "") // 第二步:把不是数字,不是小数点的过滤掉
            .replace(/^0+(\d)/, "$1") // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字
            .replace(/^\./, "0.") // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全
            .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数
            // 限制输入最大值为100
            // if (Number(dat) >= 100) {
            //         return;
            // }
            this.dialogFromDate.requiredDuration=dat;



        },
相关推荐
lxh01134 分钟前
函数防抖题解
前端·javascript·算法
颜酱8 分钟前
环检测与拓扑排序:BFS/DFS双实现
javascript·后端·算法
bluceli17 分钟前
JavaScript WeakMap与WeakSet:内存优化的秘密武器
前端·javascript
颜酱19 分钟前
理解并查集Union-Find:从原理到练习
javascript·后端·算法
前端小菜鸟也有人起19 分钟前
Vue2父子组件通信方法总结
javascript·vue.js·ecmascript
Lee川21 分钟前
从“手工砌砖”到“魔法蓝图”:响应式驱动界面的诞生与实战
前端·vue.js
与虾牵手22 分钟前
Next.js 14 App Router 踩坑实录:5 个让我加班到凌晨的坑 🕳️
前端·javascript·面试
李昊哲小课26 分钟前
电商系统项目教程
开发语言·前端·javascript
@yanyu6661 小时前
第一个前后端分离项目
java·vue.js·springboot
wing981 小时前
Vue3 接入 Google 登录:极简教程
前端·vue.js·google