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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
js实现简单数字变动效果
Nov 06 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
解决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编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
python Crypto模块的安装与使用方法
2017/12/21 Python
python numpy存取文件的方式
2020/04/01 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
华为C++笔试题
2014/08/05 面试题
linux面试题参考答案(2)
2015/12/06 面试题
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
学习演讲稿范文
2014/05/10 职场文书
建筑工地标语
2014/06/18 职场文书
2014年国庆标语
2014/06/30 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers