『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 相关文章推荐
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
js给selected添加options的方法
May 06 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
微信小程序 聊天室简单实现
2017/04/19 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python实现文件复制删除
2016/04/19 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python人脸识别初探
2017/12/21 Python
python中的字典操作及字典函数
2018/01/03 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python的pstuil模块使用方法总结
2019/07/26 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
优秀教师的感人事迹
2014/02/04 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
长城导游词
2015/01/30 职场文书
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP