『JavaScript』限制Input只能输入数字实现思路及代码
更新时间：2013年04月22日 09:56:38 作者：
一个文字方块必须限制只能输入数字（或是小数点）并且要支援 IE 和 Firefox，接下来为大家介绍下如何解决这个需求
这玩意很多人写过，但是今天临时要用的时候找不到符合需求的，所以立马来写一个，既然都写完了而且还满符合需求的就放上来让大家鞭一鞭。
需求很简单，一个文字方块必须限制只能输入数字（或是小数点）并且要支援 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;
需求很简单，一个文字方块必须限制只能输入数字（或是小数点）并且要支援 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具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，甚至有些人干脆就是一无所知。为了解决大家的疑惑，本文将详细介绍JS内存空间2021-06-06
这篇文章主要给大家介绍了关于JavaScript判断数组方法的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了javascript 动态创建表格,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JS简单实现多级Select联动菜单效果代码,涉及JavaScript数组元素的遍历及动态设置select的实现技巧,需要的朋友可以参考下2015-09-09
ES6新特性二：Iterator(遍历器)和for-of循环详解
这篇文章主要介绍了ES6新特性二：Iterator(遍历器)和for-of循环,结合实例形式分析了ES6中Iterator(遍历器)和for-of循环遍历操作的相关实现技巧与注意事项,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了js判断文本框剩余可输入字数的方法,可实现直观显示文本框可输入字数的功能,非常具有实用价值,需要的朋友可以参考下2015-02-02
在TypeScript中迭代对象键Object.keys不起作用的原因和解决方案
在TypeScript中迭代对象键object keys可能是一场噩梦,以下是我所知道的所有解决方案,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-10-10
电商系统中订单、库存中有数字等加减乘除算术,下面这篇文章主要给大家介绍了关于利用Math.js解决JS计算小数精度丢失问题的相关资料,mathjs是一个前端在计算上面必定会用到的类库,需要的朋友可以参考下2022-04-04
在 JavaScript 中,有多种方法可以保留小数点后两位,本文给大家分享比较常用的方法,文末给大家介绍了实现数据格式化保留两位小数的多种方法,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要为大家详细介绍了微信小程序自定义胶囊样式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
最新评论