admin管理员组

文章数量:1336614

I have a small form where users enter a deposit in a dollar amount. This amount can be positive or negative. I am attempting to validate the form each time a key is pressed to prevent letters or characters from being entered by accident.

Consider the function below:

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), "");
    }
}

This works fine and dandy if you only want your user to be able to enter numbers. Any other character will simply be erased. Where I am having trouble is ing up with a pattern that will work on the fly to match a positive or negative currency (without the dollar sign). Users need to be able to enter an optional negative sign, at least one number, followed by a decimal point, followed by 2 more numbers.

Example deposit amounts:

0.09

100.45

4032.34

-0.90

-54.56

-1353.00

Any help ing up with a pattern, or perhaps even a better method, would be greatly appreciated. Please let me know if more detail is needed.

I have a small form where users enter a deposit in a dollar amount. This amount can be positive or negative. I am attempting to validate the form each time a key is pressed to prevent letters or characters from being entered by accident.

Consider the function below:

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), "");
    }
}

This works fine and dandy if you only want your user to be able to enter numbers. Any other character will simply be erased. Where I am having trouble is ing up with a pattern that will work on the fly to match a positive or negative currency (without the dollar sign). Users need to be able to enter an optional negative sign, at least one number, followed by a decimal point, followed by 2 more numbers.

Example deposit amounts:

0.09

100.45

4032.34

-0.90

-54.56

-1353.00

Any help ing up with a pattern, or perhaps even a better method, would be greatly appreciated. Please let me know if more detail is needed.

Share Improve this question asked Jan 6, 2012 at 17:20 BrettBrett 7212 gold badges11 silver badges20 bronze badges 1
  • 1 Your replace function is flawed. When the keyup event is fired, it's possible that more than one character has been entered in the input field. It's also possible that the user does not place the caret at the end, causing your function to break as well. – Rob W Commented Jan 6, 2012 at 17:35
Add a ment  | 

4 Answers 4

Reset to default 5

You can use this validation pattern to match those number values.

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

This should do what you require:

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

The question mark means that it's optional.

Note that you can't match for a valid (negative) decimal on every key press, as the user starts out with either a minus sign or a digit, which already don't match the pattern.

You'd need one to check if the characters entered are valid, and another one to check if the value is a valid decimal on submit or when the user moves focus from the field.

Here was my final solution. I actually was able to get my "onkeyup" function to work nearly like I wanted to. While it doesn't check currency formatting on the fly, it does not allow for entry of letters and characters other than those specified. While this may not be perfect, it certainly is suiting my needs for this small task. Thanks for everyone who had input.

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

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

I then validate the format of the deposit "onblur"

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

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

本文标签: regexJavaScript onkeyup regular expressionStack Overflow