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 getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 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中上传文件的处理问题
2016/05/29 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
详解React 元素渲染
2020/07/07 Javascript
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python添加模块搜索路径方法
2017/09/11 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
交通工程专业推荐信
2014/09/06 职场文书
课外活动总结
2015/02/04 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP