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 相关文章推荐
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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
文件上传程序的全部源码
2006/10/09 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
php导入模块文件分享
2015/03/17 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
webpack入门必知必会
2017/01/16 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
npm qs模块使用详解
2020/02/07 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
教师申诉制度
2014/01/29 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
建设工程授权委托书
2014/09/22 职场文书
个人自查自纠材料
2014/10/14 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
合作合同协议书
2016/03/21 职场文书
资产移交协议书
2016/03/24 职场文书