『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 最常用的10个自定义函数[推荐]
Dec 26 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 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
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
pandas删除指定行详解
2019/04/04 Python
python中while和for的区别总结
2019/06/28 Python
django最快程序开发流程详解
2019/07/19 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
一文读懂Python 枚举
2020/08/25 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
群众路线教育实践活动调研报告
2014/11/03 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
事业单位个人总结
2015/02/12 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL