『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 相关文章推荐
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
mailto的使用技巧分享
Dec 21 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
javascript html5实现表单验证
Mar 01 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 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使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
如何根据业务封装自己的功能组件
2019/04/19 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
js实现缓动动画
2020/11/25 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
python 格式化输出百分号的方法
2019/01/20 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python安装scipy的步骤解析
2019/09/28 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
《长城和运河》教学反思
2014/04/14 职场文书
政府采购方案
2014/06/12 职场文书
暑假学习心得体会
2014/09/02 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技