vue里怎么控制input里只能输入正负浮点数,且能控制整数和小数的位数?

作者站长头像
站长
· 阅读数 5

vue里怎么控制input里只能输入正负浮点数,且能控制整数和小数的位数?网上很多正则都不靠谱,实测无效,要么就是不满足需求,求一份可用的,感谢!

回复
1个回答
avatar
test
2024-07-09

可以使用自定义指令实现

/**
 * 支持输入正负浮点数
 * 如果需要输入负数,则在input中加上 v-enterFloat="{ negative: true }"
 * 如果需要输入正数,则直接使用v-enterFloat
 */
enterFloat: {
        update: function (el, { value, modifiers }, vnode) {
            try {
                let a_el = el.children[0];
                let first = a_el.value.charAt(0);
                //此处可以debug看看el具体值是什么,这里演示的是原生控件input,如果是使用element中的<el-input />标签,需要通过 el.children[0] 拿到原生input.
                if (!a_el.value) {
                    return false;
                }
                a_el.value = a_el.value
                    .replace(/[^\d.]/g, '')
                    .replace(/\.{2,}/g, '.')
                    .replace('.', '$#$')
                    .replace(/\./g, '')
                    .replace('$#$', '.')
                    .replace(/^(\-)*(\d+)\.(\d{1,10}).*$/, '$1$2.$3')
                    .replace(/^\./g, '')
                if (a_el.value.indexOf(".") < 0 && a_el.value != "") {
                    a_el.value = parseFloat(a_el.value);
                }
                if (value && value.negative && first == "-") {
                    a_el.value = "-" + a_el.value;
                }
                a_el.dispatchEvent(new Event(modifiers.lazy ? "change" : "input"));
            } catch (e) { }
        },
    },
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容