『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 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
JavaScript入门基础
Aug 12 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
react路由配置方式详解
Aug 07 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
详解python单例模式与metaclass
2016/01/15 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python 获取等间隔的数组实例
2019/07/04 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
农场厂长岗位职责
2013/12/28 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
安全月活动总结
2014/05/05 职场文书
责任担保书范文
2014/05/21 职场文书
大学毕业生推荐信
2014/07/09 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
党员个人自我评价
2015/03/03 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python