js限制input只能输入有效的数字(第一个不能是小数点)


Posted in Javascript onSeptember 28, 2018

第一种方法:通过字符搜索判断等实现,适合功能增强

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="js/jq.js"></script>
 
</head>
<body>
 
 <input type="text" id="Score" />
 <script type="text/javascript">
 $(document).ready(function() {
 //敲击按键时触发
 $("#Score").bind("keypress", function(event) {
 var event= event || window.event;
 var getValue = $(this).val();
 //控制第一个不能输入小数点"."
 if (getValue.length == 0 && event.which == 46) {
  alert(1)
  event.preventDefault();
  return;
 }
 //控制只能输入一个小数点"."
 if (getValue.indexOf('.') != -1 && event.which == 46) {
  event.preventDefault();
  alert(1)
  return;
 }
 //控制只能输入的值
 if (event.which && (event.which < 48 || event.which > 57) && event.which != 8 && event.which != 46) {
  event.preventDefault();
   return;
  }
 })
 //失去焦点是触发
 $("#Score").bind("blur", function(event) {
 var value = $(this).val(), reg = /\.$/;
 if (reg.test(value)) {
 value = value.replace(reg, "");
 $(this).val(value);
 }
 })
 });
</script>
 
</body>
</html>

方法二 通过大量正则来实现,简单粗暴

<input type="text" name="je" onkeyup="clearNoNum(this)" />元 
 <script language="JavaScript" 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); 
	 } 
	} 
</script>

个人推荐使用第二个,第一个方便更多的功能控制

之前三水点靠木也发布过相关文章,大家可以查看相关文章

Javascript 相关文章推荐
通用javascript脚本函数库 方便开发
Oct 13 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
详解jquery选择器的原理
Aug 01 jQuery
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 #Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 #Javascript
对vue中v-if的常见使用方法详解
Sep 28 #Javascript
总结javascript三元运算符知识点
Sep 28 #Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 #Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 #Javascript
js隐式转换的知识实例讲解
Sep 28 #Javascript
You might like
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
二级域名转向类
2006/11/09 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
js变换显示图片的实例
2013/04/16 Javascript
AngularJS基础知识
2014/12/21 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
vue内置指令详解
2018/04/03 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
详解Python 正则表达式模块
2018/11/05 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
python中return不返回值的问题解析
2020/07/22 Python
python实现批处理文件
2020/07/28 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
企业文化标语大全
2014/06/10 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
2014年化验室工作总结
2014/11/21 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
新手初学Java网络编程
2021/07/07 Java/Android
python 判断文件或文件夹是否存在
2022/03/18 Python
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
TS 类型兼容教程示例详解
2022/09/23 Javascript