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;



        },
相关推荐
whatever who cares7 小时前
Vue3中vue文件和composables的分工
前端·javascript·vue.js
十正7 小时前
Claude code源码精读之蜂群模式
javascript·人工智能·agent·claude code
薛先生_0997 小时前
vue-编程式跳转-基本跳转
前端·javascript·vue.js
AI_零食8 小时前
健身室器材管理系统鸿蒙PC Electron框架编写深度解析
前端·javascript·学习·华为·electron·前端框架·鸿蒙
如烟花的信页8 小时前
易盾点选逆向分析
javascript·爬虫·python·js逆向
ZC跨境爬虫8 小时前
跟着 MDN 学 JavaScript day_2:JavaScript 初体验
开发语言·前端·javascript·学习·ecmascript
小妖6668 小时前
Hydration completed but contains mismatches
javascript·vue·vuepress
睡觉的时候不困69 小时前
TypedSql:在 C# 类型系统上实现一个 SQL 查询引擎
javascript
AI英德西牛仔9 小时前
Claude 导出 pdf 颜色不一样怎么办,选用 AI 导出鸭优化格式转换,多维度落地修正 PDF 色彩失真问题
javascript·人工智能·ai·chatgpt·pdf·deepseek·ai导出鸭
右耳朵猫AI9 小时前
JS/TS周刊2026W21 | Deno2.8RC、Angular22RC、TypeORM1.0
开发语言·javascript·ecmascript