『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下异步提交表单 异步跨域提交表单
Nov 17 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
redux处理异步action解决方案
Mar 22 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
使用无限生命期Session的方法
2006/10/09 PHP
smarty section简介与用法分析
2008/10/03 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
一些mootools的学习资源
2010/02/07 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
asm.js使用示例代码
2013/11/28 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python解释执行原理分析
2014/08/22 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python实现新浪博客备份的方法
2016/04/27 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python定时任务sched模块用法示例
2018/07/16 Python
python中的decorator的作用详解
2018/07/26 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
眼镜促销方案
2014/03/15 职场文书
个人授权委托书格式
2014/08/30 职场文书
护士医德医风自我评价
2014/09/15 职场文书
小学教师读书笔记
2015/07/01 职场文书
一起来学习Python的元组和列表
2022/03/13 Python