『JavaScript』限制Input只能输入数字实现思路及代码

124 阅读 0 评论 82 点赞

我是靠谱客的博主含糊硬币，最近开发中收集的这篇文章主要介绍『JavaScript』限制Input只能输入数字实现思路及代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这玩意很多人写过，但是今天临时要用的时候找不到符合需求的，所以立马来写一个，既然都写完了而且还满符合需求的就放上来让大家鞭一鞭。

需求很简单，一个文字方块必须限制只能输入数字（或是小数点）并且要支援 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; 