JS控制只能输入数字并且最多允许小数点两位


Posted in Javascript onNovember 24, 2019

下面通过一段代码给大家介绍JS控制只能输入数字并且最多允许小数点两位,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" name="je" onblur="clearNoNum(this)"/>元
<script type="text/javascript">
  function clearNoNum(obj) {
    obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
    obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
    obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
    if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额
      obj.value = parseFloat(obj.value);
    }
    if (!obj.value || obj.value == '0' || obj.value == '0.0' || obj.value == '0.00') {
      alert('退款金额不能为空');
      return;
    }
    //  正常得话继续调后端接口
  }
 
</script>
</body>
</html>

ps:js如何限制input输入框只能输入数字

代码中我是这样实现的:

<input type="text"
    class="form-control match-rotation-input"
    maxlength="3"
    οnkeyup="value=value.replace(/[^\d]/g,'')"//输入时校验    
    οnblur="value=value.replace(/[^\d]/g,'')"//失去焦点时校验
    ng-model="schedule.round"
    placeholder="请输入数字">

添加了一行οnkeyup="value=value.replace(/[^\d]/g,'')"

这里运用了正则表达式来处理比较简单,然后添加提示语:placeholder="请输入数字"。

但是为什么还要加οnblur="value=value.replace(/[^\d]/g,'')"这一行呢?

这是因为在操作的过程中,会发现如果你一直常按着字母键,然后点击鼠标让input失去焦点,

会导致在input框中出现字母,所以为了避免这个问题,后面又加入了οnblur="value=value.replace(/[^\d]/g,'')"

注意:之前想过改type为:number类型  但是出来的样式不符合我们要的,所以采用了正则来匹配

总结

以上所述是小编给大家介绍的JS控制只能输入数字并且最多允许小数点两位的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
node跨域请求方法小结
Aug 25 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 #Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 #Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 #Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 #Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 #Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 #Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
You might like
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
在Python的Django框架中编写编译函数
2015/07/20 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
网络优化专员求职信
2014/05/04 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
校长新学期寄语2016
2015/12/04 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python