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 preload&amp;lazy load
May 13 Javascript
javascript中万恶的function实例分析
May 25 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
jquery实现pager控件示例
Apr 09 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
js闭包用法实例详解
Dec 13 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
flask中过滤器的使用详解
2018/08/01 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
拾金不昧表扬信范文
2014/01/11 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
保密工作目标责任书
2014/07/28 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL