『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 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
JS跨域问题详解
Nov 25 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 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
php输出图像的方法实例分析
2017/02/16 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
Python yield 小结和实例
2014/04/25 Python
python 容器总结整理
2017/04/04 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python放大图片和画方格实现算法
2018/03/30 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python版中国省市经纬度
2020/02/11 Python
简单了解Python write writelines区别
2020/02/27 Python
python中pop()函数的语法与实例
2020/12/01 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
专业实习自我鉴定
2013/10/29 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
毕业生工作求职信
2014/06/30 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Django程序的优化技巧
2021/04/29 Python
python中filter,map,reduce的作用
2022/06/10 Python