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;



        },
相关推荐
dsyyyyy110122 分钟前
JavaScript变量
开发语言·javascript·ecmascript
kyriewen1 小时前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
胡志辉的博客2 小时前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖2 小时前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty3 小时前
Vue2与Vue3之间API差异
前端·javascript·vue.js
老毛肚3 小时前
软件测试期末考试
vue.js
小二·3 小时前
Next.js 15 全栈开发实战
开发语言·javascript·ecmascript
杨若瑜4 小时前
本地开发环境慢?localhost的锅!
vue.js
Rain5094 小时前
2.1 Nest.js 项目初始化与模块化架构
开发语言·前端·javascript·后端·架构·数据分析·node.js
拾年2755 小时前
从零手写 Ajax:用原生 XHR 搭建前后端交互全流程
前端·javascript·ajax