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 匿名函数及其代码模式原理
Mar 19 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
深入理解js中this的用法
May 28 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
Node.js API详解之 net模块实例分析
May 18 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+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
深入理解PHP中的global
2014/08/19 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
javascript回调函数详解
2018/02/06 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
python 实现客户端与服务端的通信
2020/12/23 Python
建筑工程实习自我鉴定
2013/09/19 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
学校捐书活动总结
2015/05/08 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js