『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封装的不错的选项卡效果代码
Feb 15 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
『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 header示例代码(推荐)
2010/09/08 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
Python中turtle作图示例
2017/11/15 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python实现的质因式分解算法示例
2018/05/03 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
django 环境变量配置过程详解
2019/08/06 Python
python命令 -u参数用法解析
2019/10/24 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
利用python实现汉诺塔游戏
2021/03/01 Python
关于期中考试的反思
2014/02/02 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书