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 相关文章推荐
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
JavaScript 基本概念
Jan 20 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
JavaScript实现复选框全选功能
Apr 11 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之Smarty入门
2007/01/04 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
php图片添加水印例子
2016/07/20 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
php数组遍历类与用法示例
2019/05/24 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
js中json处理总结之JSON.parse
2016/10/14 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
Python数组定义方法
2016/04/13 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
体育教师自我鉴定
2014/02/12 职场文书
2014年超市工作总结
2014/11/19 职场文书
质量保证书怎么写
2015/02/27 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Python操作CSV格式文件的方法大全
2021/07/15 Python
Python pyecharts绘制条形图详解
2022/04/02 Python