demoshop

這玩意很多人寫過，但是今天臨時要用的時候找不到符合需求的，所以立馬來寫一個，既然都寫完了而且還滿符合需求的就放上來讓大家鞭一鞭。

需求很簡單，一個文字方塊必須限制只能輸入數字（或是小數點）並且要支援 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;

 

• 限制input只能输入數字(兼容IE 和Firefox)
• onKeyUp 事件
• HTML DOM Event 對象