Today, I came across a need for WeChat payment, so I needed to set the number that can be paid in the input box. If I wanted to speculate, I found a ready-made method directly on the Internet, but found that most of them had bugs or did not work. So I spent some time writing the following two solutions, hoping to help.
The type in the input must be set to text to be valid! ! !
<template>
<div class="home">
<!-- 必须type设置为text才有效！！！number无效 -->
<input type="text" v-model="amount" @input="limitNum(amount)" />
</div>
</template>
data() {
return {
amount: "",
};
},
1. If you enter 01, it will be displayed as 1
//第一种方案：用户输入01、02等，则展示成1、2，等于非小数时过滤第一位0
limitNum(amount) {
amount = amount
.replace(/[^\d.]/g, "") //只能输入数字
.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3") //只能输入两个小数
.replace(/\.{2,}/g, "."); //出现多个点时只保留第一个
// 第一位不让输小数点
if (amount == ".") {
amount = "";
}
// 如果第一位是0，第二位必须大于0或者小数点
if (amount.substring(0, 1) == 0) {
if (amount.substring(1, 2) > 0) {
amount = amount.substring(1, 2);
} else if (
amount.substring(1, 2) === 0 ||
amount.substring(1, 2) === "0"
) {
amount = "0";
}
} else {
// 如果第一位数字大于0（不等于0肯定就大于0），仅需考虑第二位是小数点的情况
if (amount.indexOf(".") !== -1) {
if (amount.substring(0, 1) > 0) {
console.log("第一位大于0");
} else {
console.log("第一位等于0");
if (amount.substring(2, 3) > 0) {
console.log("小数点后第一位大于0");
} else {
console.log("小数点后第一位等于0");
amount = "0.";
}
}
} else {
console.log("没有小数点，正常输入");
}
}
this.amount = amount;
},
2. If you enter 00 or 01, the input box will be cleared directly
//第二种方案：输入00、01等0开头的整数时，直接清空输入框让用户重新输入
num(amount) {
amount = amount
.replace(/[^\d.]/g, "") //只能输入数字
.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3") //只能输入两个小数
.replace(/\.{2,}/g, "."); //出现多个点时只保留第一个
// 第一位不让输小数点
if (amount == ".") {
amount = "";
}
// 如果第一位是0，有第二位且第二位不是小数点的情况下 就清空输入框
if (amount.slice(0, 1) == "0") {
if (amount.slice(1, 2)) {
if (amount.slice(1, 2) == ".") {
console.log("第二位是小数点");
} else {
console.log("第二位不是小数点，清空输入框");
amount = "";
}
}
}
this.amount = amount;
},
Personally, I think that the user experience of the first solution is better. The purpose of the developer is nothing more than to convert the content entered by the user into a number in the form of an amount, but the code logic is a little more complicated. The second type is more concise and easy to understand. It is directly killed with a stick. If the user wants to type indiscriminately, he can directly clear the input box and start again. How to choose depends on the specific needs of development!