需求:退款金额,只能大于等于0,且只能输入2位小数。
由于我的web端和APP和小程序,框架不一样。 因此input输入框内方法有部分变动。
我总结了以下方法:
一、最实的的原生input框(所有框架都能用)
需求:大于等于0,且只能输入2位小数
<input
type="number"
v-model="amount"
maxlength="12"
@input="handleInput(amount)"
placeholder="请输入金额"
/>
// 检查输入
handleInput(value) {
//大于等于0,且只能输入2位小数
let val=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1');
if(val==null||val==undefined||val==''){
val=0
}
this.amount = val;
},
// 或者替换下@input (这个有可能因为框架问题,出问题,但胜在简单)
<input
type="number"
v-model="amount"
maxlength="12"
oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
placeholder="请输入金额"
/>
//
一些其他正则总结
var reg = /[^\d.]/g
// 只能是数字和小数点,不能是其他输入
val = val.replace(reg, "")
// // 保证第一位只能是数字,不能是点
val = val.replace(/^\./g, "");
// // 小数只能出现1位
val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
// // 小数点后面保留2位
val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
二、ant design vue 中输入框a-input和a-input-number
需求:大于等于0,且只能输入2位小数
<a-input placeholder="输入金额"
type="number"
@change="limitNumber(item.amount,index)"
v-model:value="item.itemAmount"
style="border: none;">
</a-input>
limitNumber(value,i) {
// console.log(i);
let val=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1');
if(val==null||val==undefined||val==''){
val=0
}
this.itemAmount=val
}
需求:只能输入大于等于零的整数
<a-input-number
v-model:value="item.amount"
:min="0"
:formatter="limitNumber"
:parser="limitNumber"
/>
// ant design数字输入框限制只能输入大于等于零的整数
limitNumber(value){
if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
} else if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(/\./g, '') : 0
} else {
return 0
}
}