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 相关文章推荐
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
javascript date格式化示例
Sep 25 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
详解如何使用Node.js实现热重载页面
May 06 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中用hash实现的数组
2011/07/17 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python 第一步 hello world
2009/09/25 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
如何写出好的Java代码
2014/04/25 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
小学生家长寄语
2014/04/02 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
长江三峡导游词
2015/01/31 职场文书
中秋节晚会开场白
2015/05/29 职场文书
鸦片战争观后感
2015/06/09 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
nginx配置指令之server_name的具体使用
2022/08/14 Servers