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 相关文章推荐
intro.js 页面引导简单用法 分享
Aug 06 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 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
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
Python中psutil的介绍与用法
2019/05/02 Python
python多进程读图提取特征存npy
2019/05/21 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
销售主管竞聘书
2014/03/31 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
律师授权委托书范本
2014/10/07 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
教导处教学工作总结
2015/08/12 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android