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选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
js 调用百度分享功能
Feb 27 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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 FPDF类库应用实现代码
2009/03/20 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
js获取form的方法
2015/05/06 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
JS实现吸顶特效
2020/01/08 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python原始字符串(raw strings)用法实例
2014/10/13 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
Python读写Excel表格的方法
2021/03/02 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
企划主管岗位职责
2013/12/12 职场文书
合作投资意向书
2014/04/01 职场文书
求职信怎么写
2014/05/23 职场文书
客户答谢会活动方案
2014/08/31 职场文书
2014年社区工作总结
2014/11/18 职场文书
总经理聘用协议书
2015/09/21 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python