2012-01-06 148 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"; 
    }