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 相关文章推荐
初识SmartJS - AOP三剑客
Jun 08 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
Node.js实现断点续传
Jun 23 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
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
javascript常见操作汇总
2014/09/03 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
理解javascript async的用法
2017/08/22 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
用Eclipse写python程序
2018/02/10 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
解决Mac下使用python的坑
2019/08/13 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
python中altair可视化库实例用法
2021/01/26 Python
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
数学国培研修感言
2014/02/13 职场文书
开工仪式策划方案
2014/05/23 职场文书
HR求职自荐信范文
2014/06/21 职场文书
员工安全生产责任书
2014/07/22 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
高老头读书笔记
2015/06/30 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书