『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;