踩坑uni-app开发小程序input表单金额校验
使用v-model双向绑定数据,@input事件绑定校验函数,并且在校验金额后设置时必须使用计时器
<input?v-model="money"?type="digit"??@input="testMoney"/>
testMoney(e){
? ? var?that?=?this
? ? //允许输入一个小数点
? ? e.detail.value?=?e.detail.value.replace(".",?"$#$").replace(/\./g,?"").replace("$#$",?".");
? ? //允许输入两位小数
? ? 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);
? ? //如果第一位为小数点,则转换为0. 只保留一个小数点
? ? }?else?if?(e.detail.value.indexOf(".")?==?0)?{
? ? ? ? e.detail.value?=?e.detail.value.replace(/[^$#$]/g,?"0.");?
? ? ? ? e.detail.value?=?e.detail.value.replace(/\.{2,}/g,?".");
? ? }
? ? //这里计时器必须使用,不然input框中不会显示校验过的值,只显示你输入的值
? ? setTimeout(()=>{
? ? ? ? that.money?=?e.detail.value
? ? },1)
}
以上,就是输入的金额验证