今天碰到一个需求，做的是微信支付，所以需要设置输入框里必须输入是能支付的数字，想投机网上直接找现成的方法，发现大部分都有bug或者不生效。于是自己费了点时间写了以下提供两种方案，希望有帮助。
input里面type必须设置为text才有效！！！
<template>
<div class="home">
<!-- 必须type设置为text才有效！！！number无效 -->
<input type="text" v-model="amount" @input="limitNum(amount)" />
</div>
</template>
data() {
return {
amount: "",
};
},
一、如果输入01，则展示成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;
},
二、如果输入00、01，则直接清空输入框
//第二种方案：输入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;
},
个人觉得，第一种方案用户体验更好一些，开发者的目的无非就是让用户输入的内容转变为金额形式的数字，但代码逻辑稍复杂一些。第二种就更简洁易懂一些，直接一棍子打死，用户想乱输直接清空输入框重来。怎么选用取决于开发的具体需求吧！