『JavaScript』限制Input只能输入数字实现思路及代码


Posted in Javascript onApril 22, 2013

这玩意很多人写过,但是今天临时要用的时候找不到符合需求的,所以立马来写一个,既然都写完了而且还满符合需求的就放上来让大家鞭一鞭。

需求很简单,一个文字方块必须限制只能输入数字(或是小数点)并且要支援 IE 和 Firefox。
HTML的 Input 是这样下滴

<input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber($(this),value)" />

•其中那个 Style 是在 IE 浏览器下有效用的,可以让使用者无法在这文字方块内使用输入法。
•而onkeyup 则是我们自己撰写的 js 啦,完整的 Code 在下面。
--------------------------------------------------------------------------------
验证只能输入数字
function ValidateNumber(e, pnumber){ 
if (!/^\d+$/.test(pnumber)){ 
$(e).val(/^\d+/.exec($(e).val())); 
} 
return false; 
}

demo 是利用 Regex 来将不属于数字的过滤掉。
--------------------------------------------------------------------------------
实务上经常需要验证的是有小数点的栏位,网路上搜寻到的一堆是可以输入「1.2.3456」的这种诡异值,其实只要小改一下 Regex 就可以验证了。
function ValidateFloat(e, pnumber){ 
if (!/^\d+[.]?\d*$/.test(pnumber)){ 
$(e).val(/^\d+[.]?\d*/.exec($(e).val())); 
} 
return false; 
}

这样子就可以输入整数也可以输入一个小数点
--------------------------------------------------------------------------------
以上就给有需要的朋友使用啦。
因为有网友说这种玩意儿不需要动用到 jQuery 的确,是不用动用到所以来写一下 纯 javascript 的版本
HTML要有所改变
<input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber(this,value)" />

只能输入数字(纯 javascript)
function ValidateNumber(e, pnumber){ 
if (!/^\d+$/.test(pnumber)){ 
e.value = /^\d+/.exec(e.value);} 
return false; 
}

可以输入小数(纯 javascript)
function ValidateNumber(e, pnumber) 
{ 
if (!/^\d+[.]?\d*$/.test(pnumber)) 
{ 
e.value = /^\d+[.]?\d*/.exec(e.value); 
} 
return false; 
}

有网友说他想要限制只有小数点后一位就好,因此再来小改一下其实重点只有RegExp要改而已
function ValidateFloat2(e, pnumber) 
{ 
if (!/^\d+[.]?[1-9]?$/.test(pnumber)) 
{ 
e.value = /\d+[.]?[1-9]?/.exec(e.value); 
} 
return false; 
}

如果你是用万恶的IE那当你一开始就输入非数字的时候就会送你一个讨厌的null因此又要改写成这样过滤掉
if (!/^\d+$/.test(pnumber)) 
{ 
var newValue = /^\d+/.exec(e.value); 
if (newValue != null) 
{ 
e.value = newValue; 
} 
else 
{ 
e.value = ""; 
} 
} 
return false;
Javascript 相关文章推荐
JS调试必备的5个debug技巧
Mar 07 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
在react中使用vue的状态管理的方法示例
May 02 Javascript
React更新渲染原理深入分析
Dec 24 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 #Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 #Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 #Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 #Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 #Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 #Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 #Javascript
You might like
基于文本的访客签到簿
2006/10/09 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
市级文明单位申报材料
2014/05/07 职场文书
超市促销活动总结
2014/07/01 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
创业计划书之废品回收
2019/09/26 职场文书