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事件串连执行多个处理过程的方法
Mar 09 Javascript
直接生成打开窗口代码,不必下载
May 14 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
javascript中var的重要性分析
Feb 11 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
js实现自定义路由
Feb 04 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
webpack 动态批量加载文件的实现方法
Mar 19 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
咖啡语言
2021/03/03 咖啡文化
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
js 操作符汇总
2014/11/08 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
答题辅助python代码实现
2018/01/16 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python pygame实现方向键控制小球
2019/05/17 Python
python算法题 链表反转详解
2019/07/02 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python类反射机制使用实例解析
2019/12/30 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
2014年党支部学习材料
2014/05/19 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
红白喜事主持词
2015/07/06 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers