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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
javascript数组使用调用方法汇总
Dec 08 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
Three.js快速入门教程
Sep 09 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
countUp.js实现数字滚动效果
Oct 18 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
利用Python演示数型数据结构的教程
2015/04/03 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
python 网络编程常用代码段
2016/08/28 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
python烟花效果的代码实例
2020/02/25 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
C# .NET面试题
2015/11/28 面试题
Solaris操作系统的线程机制
2012/12/23 面试题
化工专业应届生求职信
2013/11/08 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
委托书的写法
2014/08/30 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
python 远程执行命令的详细代码
2022/02/15 Python