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 DOM学习第一章 W3C DOM简介
Feb 19 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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
杏林同学录(三)
2006/10/09 PHP
实用函数10
2007/11/08 PHP
附件名前加网站名
2008/03/23 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
php防盗链的常用方法小结
2010/07/02 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
小程序转发探索示例
2019/02/19 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
Python获取当前路径实现代码
2017/05/08 Python
python去除扩展名的实例讲解
2018/04/23 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
python数据爬下来保存的位置
2020/02/17 Python
python3爬虫中异步协程的用法
2020/07/10 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
入党思想汇报
2014/01/05 职场文书
新年主持词
2014/03/27 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
2014年教师个人工作总结
2014/11/10 职场文书