文章目录
- 一、前言
- 二、实现
- 2.1、`HTML`
- 2.2、只输入正整数
- 2.3、只能输入数字或小数点
- 三、最后
一、前言
常见的el-input
可能会限制用户只能输入正整数或保留两位小数,达到输入金额的需求,点击【跳转】访问el-input
的官方文档
element-ui
是有el-input-number
这个组件,但是个人觉得不适用,该组件更适合加减数量,点击【跳转】访问el-input-number
的官方文档
二、实现
2.1、HTML
<template><el-inputv-model="number"@input="validateInput"/>
</template>
2.2、只输入正整数
export default {data() {return {number: ""}},methods: {// 限制正整数输入validateInput(value) {value = value.replace(/[^0-9]/g, "");if (value.indexOf(0) == 0) {value = "";} }}
}
2.3、只能输入数字或小数点
export default {data() {return {number: "",}},methods: {// 限制只能输入数字或小数点validateInput(value) {value = value.replace(/[^\d{1,}.\d{1,}|\d{1,}]/g, "");value = value.replace(/^(-)*(\d+).(\d\d).*$/, "$1$2.$3");}}
}
三、最后
本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕