2012-01-06 333 views
0

我有一個小表單,用戶輸入一定金額的存款。這個數量可以是正數也可以是負數。每次按下某個鍵時,我都會嘗試驗證表格,以防止意外輸入字母或字符。JavaScript onkeyup正則表達式

考慮下面的功能:

var deposit = document.getElementById("deposit"); 

deposit.onkeyup = function() { 
    var PATTERN = /\d$/; 

    if (!deposit.value.match(PATTERN)) { 
     deposit.value = deposit.value.replace(deposit.value.slice(-1), ""); 
    } 
} 

,如果你只希望用戶能夠輸入數字這工作得很好,很正常。任何其他角色將被簡單地刪除。我遇到麻煩的時候會想出一個可以即時運行的模式,以匹配正面或負面的貨幣(沒有美元符號)。用戶需要輸入一個可選的負號,至少一個數字,後跟一個小數點,然後再輸入兩個數字。

實施例的存款量:

0.09

100.45

4032.34

-0.90

-54.56

-1353.00

任何幫助提出一個模式,或者甚至更好的方法,將不勝感激。請讓我知道是否需要更多細節。

+1

你替換功能是有缺陷的。當'keyup'事件被觸發時,可能在輸入字段中輸入了多個字符。它也*有可能是用戶不會將脫字符號放在最後,導致你的函數被破壞。 – 2012-01-06 17:35:11

回答

4

您可以使用此驗證模式來匹配這些數值。

^-?\d+\.\d{2}$

+0

這種模式也不會讓我輸入任何字符。也許是因爲當你輸入一個字符時,它不符合整個模式? – Brett 2012-01-06 17:36:08

+0

這是正確的。如果您停止基於正則表達式模式匹配的鍵輸入,則只能一次檢查單個字符。這個正則表達式匹配應該是在field事件'onblur'或'onchange'發生時應該運行的東西。 – James 2012-01-06 17:40:49

+0

我不確定這是否會引起您的興趣,但我一直在研究JavaScript表單驗證器:http://splatbyte.com/library/jform/docs/demo_quick.php它預先加載了幾個驗證,但是如果您查看提供的URL,則第二個示例會顯示您可以用來運行此驗證測試的自定義驗證。這個庫也包含關鍵過濾。 – James 2012-01-06 17:43:43

2

這應該做你需要什麼:

var PATTERN = /\-?\d+\.\d{2}$/; 

問號意味着它是可選的。

+0

這種模式似乎是正確的。但是,它正在刪除我輸入的每個字符。 – Brett 2012-01-06 17:34:35

1

請注意,您無法在每次按鍵時匹配有效的(負數)小數點,因爲用戶以減號或數字開頭,而該號碼已與模式不匹配。

你需要一個檢查輸入的字符是否有效,另一個檢查提交時的值是否爲有效的小數或當用戶從字段中移動焦點時。

+0

雅,這就是我的想法...感謝您的洞察力 – Brett 2012-01-06 17:37:16

0

這是我的最終解決方案。我實際上能夠讓我的「onkeyup」功能幾乎像我想的那樣工作。雖然它不會即時檢查貨幣格式,但它不允許輸入除指定的字母和字符以外的字符和字符。雖然這可能不完美,但它確實適合我這項小任務的需要。感謝所有有意見的人。

deposit.onkeyup = function() { 
    var PATTERN = /[^0-9-.]/; 

    if (deposit.value.match(PATTERN)) { 
     deposit.value = deposit.value.replace(deposit.value.slice(-1), ""); 
    } 
} 

我然後再驗證存款的格式 「的onblur」

var PATTERN = /\-?\d+\.\d{2}$/; 

    if (!reDeposit.value.match(PATTERN)) { 
     depositError.innerHTML = "Enter a valid amount"; 
    }