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与C# Windows应用程序交互方法
Jun 29 Javascript
JQuery 学习笔记 选择器之二
Jul 23 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 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
德生PL330测评
2021/03/02 无线电
php.ini中文版
2006/10/09 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JS检测图片大小的实例
2013/08/21 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
js代码实现轮播图
2020/05/04 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
美发店5.1活动方案
2014/01/24 职场文书
机关保密承诺书
2014/06/03 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2014年科研工作总结
2014/12/03 职场文书
护士实习自荐信
2015/03/06 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
基于Python实现对比Exce的工具
2022/04/07 Python