『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设置IFRAME的SRC值的代码
Nov 30 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
写一个Vue loading 插件
Nov 09 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
『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函数代码
2013/08/29 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
python字符串连接方式汇总
2014/08/21 Python
Python入门篇之数字
2014/10/20 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
想学画画?python满足你!
2020/12/24 Python
怎样创建、运行java程序
2014/08/01 面试题
学生处主任岗位职责
2013/12/01 职场文书
房屋买卖协议书
2014/04/10 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
学生党员检讨书范文
2014/12/27 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android