这个校验是,参考微信充值的逻辑写的。具体逻辑为:当第一位输入“ . ” 时,输入框的值自动被赋值为 “ 0. ” 。当第一位输入 “ 0 ” ,第二位为非 “ . ”时,删除第一位 “ 0 ” 。还有就是只保留小数点后两位(没有四舍五入)。废话不多说,上代码(代码注释写的比较详细):
<view class="recharge-input">
<i class="text-xl">¥</i>
<input
type="digit"
v-model.lazy="rechargeAmount"
placeholder="请输入充值金额"
@input="validateRechargeAmount"
/>
</view>
validateRechargeAmount(e) {
let that = this;
that.verify(e);
//重新赋值
that.$nextTick(() => {
that.rechargeAmount = e.detail.value;
});
},
// 金额校验
verify(e) {
// 清除"数字"和"."以外的字符
e.detail.value = e.detail.value.replace(/[^\d.]/g, "");
// 如果 rechargeAmount 的长度超过 2
if (this.rechargeAmount.length > 2) {
// 如果第一个字符是 0,并且不是 "0."
if (e.detail.value[0] == 0 && e.detail.value.indexOf("0.") != 0) {
// 删除第一个字符
e.detail.value = e.detail.value.toString().slice(1);
}
// 如果第一个字符是小数点
else if (e.detail.value[0] == ".") {
// 删除第一个字符,并且将小数点替换为特殊字符,再替换回来
e.detail.value = e.detail.value.toString().slice(1);
e.detail.value = e.detail.value
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".");
}
}
// 如果 rechargeAmount 的长度小于或等于 2
else {
// 只保留第一个小数点,清除多余的
e.detail.value = e.detail.value.replace(/\.{2,}/g, ".");
}
// 确保小数点后最多两位
e.detail.value = e.detail.value.replace(
/^(\-)*(\d+)\.(\d\d).*$/,
"$1$2.$3"
);
// 如果没有小数点,且不为空字符串
if (e.detail.value.indexOf(".") < 0 && e.detail.value != "") {
// 将输入转换为浮点数
e.detail.value = parseFloat(e.detail.value);
}
// 如果第一个字符是小数点,并且 rechargeAmount 的长度为 1
else if (
e.detail.value.indexOf(".") == 0 &&
this.rechargeAmount.toString().length == 1
) {
// 补全为 "0."
e.detail.value = e.detail.value.replace(/[^$#$]/g, "0.");
e.detail.value = e.detail.value.replace(/\.{2,}/g, ".");
}
}