『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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
Django使用多数据库的方法
Sep 06 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 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
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python2.7安装图文教程
2018/03/13 Python
python字符串string的内置方法实例详解
2018/05/14 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Python删除n行后的其他行方法
2019/01/28 Python
python调用支付宝支付接口流程
2019/08/15 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
C++的几个面试题附答案
2016/08/03 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python