『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 相关文章推荐
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
javascript实现点击产生随机图形
Jan 25 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
删除数组元素实用的PHP数组函数
2008/08/18 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
Python模块文件结构代码详解
2018/02/03 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
贝佳斯官方网站:Borghese
2020/05/08 全球购物
医学专业职业生涯规划范文
2014/02/05 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
股份合作协议书范本
2014/04/14 职场文书
社会调查研究计划书
2014/05/01 职场文书
农行心得体会
2014/09/02 职场文书
房屋授权委托书范本
2014/10/07 职场文书
机关作风建设心得体会
2014/10/22 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
预备党员表决心的话
2015/09/22 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS