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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
Prototype Template对象 学习
2009/07/19 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python日期操作学习笔记
2008/10/07 Python
python自动格式化json文件的方法
2015/03/11 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
python爬虫基础之urllib的使用
2020/12/31 Python
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
房屋租房协议书范本
2014/12/04 职场文书
详解python的内存分配机制
2021/05/10 Python