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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
JS实现图片幻灯片效果代码实例
May 21 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
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
python 文件操作api(文件操作函数)
2016/08/28 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Internet主要有哪些网络群组成
2015/12/24 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
新员工入职感言
2014/02/01 职场文书
公司踏青活动方案
2014/08/16 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
单位作风建设自查报告
2014/10/23 职场文书
综合测评自我评价
2015/03/06 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
锦旗赠语
2015/06/23 职场文书
《正比例》教学反思
2016/02/23 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫