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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
javascript数组去重小结
Mar 07 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
fastadmin中调用js的方法
May 14 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逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
浅析php原型模式
2014/11/25 PHP
PHP在线书签系统分享
2016/01/04 PHP
零基础php编程好学吗
2019/10/11 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
Python抽象类的新写法
2015/06/18 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
详解Python中的正则表达式
2018/07/08 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python中os.remove()用法及注意事项
2021/01/31 Python
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
京剧自荐信
2014/01/26 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers