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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
jQuery DIV弹出效果实现代码
Jul 03 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
详解JavaScript函数对象
Nov 15 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
vue实现标签云效果的示例
Nov 09 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导入导出Excel代码
2015/07/07 PHP
jQuery登陆判断简单实现代码
2013/04/21 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
微信小程序制作表格的方法
2019/02/14 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python实现识别手写数字大纲
2018/01/29 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
关于Python错误重试方法总结
2021/01/03 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
服务之星获奖感言
2014/01/21 职场文书
批评与自我批评材料
2014/02/15 职场文书
护士自我鉴定总结
2014/03/24 职场文书
会计岗位说明书
2014/07/29 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
优化Mysql查询的示例
2022/04/26 MySQL