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


Posted in Javascript onNovember 06, 2019

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

----代码省略
<input id="amt" type="number" v-model="amount"/>
----代码省略
data:{
 return{
  amount:""
 }
}
----代码省略
watch:{
 amount(newVal,oldVal){
 console.log(newVal)
 var reg = /^(\d{0,8})(\.(\d{0,2}))?$/g;
 if(!reg.test(newVal)){
  if(newVal == ''){
 this.amount = '';
 return;
  }
  this.amount = oldVal
 }else{
  this.amount = newVal;
 }
 }
}

ps:vue input控制输入框十位整数位两位小数位,其他字符不让输入

<input type="text" placeholder="请输入金额" v-model="orderMoney" @input="checkInput" />

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);
  return value;
 }

总结

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

Javascript 相关文章推荐
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
Javascript模块化编程详解
Dec 01 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
js正则相关知识点专题
May 10 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
vuex存值与取值的实例
Nov 06 #Javascript
node省市区三级数据性能测评实例分析
Nov 06 #Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 #Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 #Javascript
vuex state中的数组变化监听实例
Nov 06 #Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 #Javascript
webpack是如何实现模块化加载的方法
Nov 06 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
安装APACHE
2007/01/15 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python:socket传输大文件示例
2017/01/18 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python日志logging模块使用方法分析
2019/05/23 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
python time()的实例用法
2020/11/03 Python
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
后勤主管岗位职责
2014/03/01 职场文书
商超业务员岗位职责
2014/03/12 职场文书
捐书倡议书
2014/08/29 职场文书
微信搭讪开场白
2015/05/28 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
实用求职信模板范文
2019/05/13 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
React中的Context应用场景分析
2021/06/11 Javascript
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python