微客导航 » 文章资讯 » vue限制输入框只能输入8位整数和2位小数的代码

vue限制输入框只能输入8位整数和2位小数的代码

2023-08-09 19:35:04 180

看到这个标题好像很简单，onblur、onchange事件都能做到，但是用户体验感貌似很差。查了下百度查不到资料了。看了下vue的基础，发现vue有个watch 监听器好吧，从这里入手用v-model加watch就可以很简单的实现这一个功能。

----代码省略

----代码省略
data:{
return{
amount:""
}
}
----代码省略
watch:{
amount(newVal,oldVal){
console.log(newVal)
varreg=/^(\d{0,8})(\.(\d{0,2}))?$/g;
if(!reg.test(newVal)){
if(newVal==''){
this.amount='';
return;
}
this.amount=oldVal
}else{
this.amount=newVal;
}
}
}

ps：vueinput控制输入框十位整数位两位小数位，其他字符不让输入



checkInput(){
this.orderMoney=this.dealInputVal(this.orderMoney);
},
dealInputVal(value){
value=value.replace(/^0*(0\.|[1-9])/,"$1");
value=value.replace(/[^\d.]/g,"");//清除"数字"和"."以外的字符
value=value.replace(/^\./g,"");//验证第一个字符是数字而不是字符
value=value.replace(/\.{1,}/g,".");//只保留第一个.清除多余的
value=value
.replace(".","$#$")
.replace(/\./g,"")
.replace("$#$",".");
value=value.replace(/^(\-)*(\d*)\.(\d\d).*$/,"$1$2.$3");//只能输入两个小数
value=
value.indexOf(".")>0
?value.split(".")[0].substring(0,10)+"."+value.split(".")[1]
:value.substring(0,10);
returnvalue;
}

总结

以上所述是小编给大家介绍的vue限制输入框只能输入8位整数和2位小数的代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue限制输入框只能输入8位整数和2位小数的代码

热门推荐

随机推荐