在计算字段中防止多个小数点

Question

I have a JavaScript calculator which uses the following code to handle decimal points in the calculation input field (also below):

$('#button-dot').click(function() {
var lastChar = $('#disp').val().slice(-1);
var firstChar = $('#disp').val().slice(0);
if ($('#disp').hasClass("result")) {
      $('#disp').removeClass("result").val("");
      addChar(this.form.display,'0' + '.');
    }
else if (lastChar == '.'){
    // DO NOTHING
    }
else if (lastChar == '1' || lastChar == '2' || lastChar == '3' || lastChar == '4' || lastChar == '5' || lastChar == '6' || lastChar == '7' || lastChar == '8' || lastChar == '9' || lastChar == '0' && firstChar != '0'){
    addChar(this.form.display,'.');
    }
else if (firstChar == '0'){
    addChar(this.form.display,'0' + '.');
    }
else {
  addChar(this.form.display,'0' + '.');
  }
  $('#disp').removeClass("result");
});

where the addChar function is given by:

function addChar(input, character) {
  if (input.value == null || input.value == "0" ) {
    input.value = character
    }
  else {
    input.value += character
    }
};

and the input field:

<INPUT NAME="display" ID="disp" VALUE="0" SIZE="28" MAXLENGTH="25"/>

I want to enhance my code in such a way as to restrict users from entering multiple decimals in the same number (as seen below), while still allowing multiple decimals in the calculation string (also below):

Avoid this -

But allow this -

I have looked into regex as I understand the solution to my problem may involve it somehow, but I am not sure how to implement it (my JavaScript skills are still a work in progress!).

I also thought of splitting the string with any of the operands ( -,+,/,*,% ) and checking each element of the resulting array for a decimal point, but I am thinking that might be a tad messy.

Any ideas?

Answer 1

I would make a counter variable and then add one to it every time you come across a . , while resetting to zero every time you find an operand. That way, if your counter is any more than one at the end of the for loop, than you can alert the user to get rid of the dot.

Pseudo-code:

// Do this input.length - 1 times:

// store current char in var curChar.
// check if curChar is a dot. If it is, counter++
// check if curChar is an operand. If it is, counter = 0.

// After the for loop, check if counter is 1 or 0. If it is either of  
// these, the user entered an acceptable input. Otherwise, they need to 
// take out the extra dots.

Answer 2

You could easily do this with a single regular expression:

^(?:(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:[-+/*%]|$))+$

Explanation

 ^                      # Begin of string
 (?:                    # Group
      (?:                    #  A number
           \d+ 
           (?: \. \d* )?
        |  \. \d+ 
      )
      (?:
           [-+/*%]                # Operator
        |                       # or, 
           $                      # EOS
      )
 )+                     # End group, do 1 to many times
 $                      # End of string

Answer 3

Yup, you can use the following regex to validate user input:

^\d+(\.\d+)?([+\-*\/]\d+(\.\d+)?)*$

• \\d+(\\.\\d+)? matches a decimal
• [+\\-*\\/] matches the operators

regex101

 $('#disp').on('input', function() { if (this.value.match(/^\\d+(\\.\\d+)?([+\\-*\\/]\\d+(\\.\\d+)?)*$/)) { $('#status').show(); } else { $('#status').hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <INPUT NAME="display" ID="disp" VALUE="0" SIZE="28" MAXLENGTH="25"/> <span id="status">OK</span> 

Answer 4

You could trigger an error function if the input string matches \\d\\.\\d+\\. - that's a digit followed by a decimal place, then 1 or more digits followed by another decimal point. If there is anything other than a digit after the first decimal point (such as an operator), the error will not trigger.

regex101

Answer 5

So I added a counter:

dotCount = 0;

And did this for the button-dot function and the operands:

$('#button-dot').click(function() {
var lastChar = $('#disp').val().slice(-1);
var firstChar = $('#disp').val().slice(0);

if (dotCount == 0){
    if ($('#disp').hasClass("result")) {
      $('#disp').removeClass("result").val("");
      addChar(this.form.display,'0' + '.');
    }
    else if (lastChar == '.'){
        // DO NOTHING
    }
    else if (lastChar == '1' || lastChar == '2' || lastChar == '3' || lastChar == '4' || lastChar == '5' || lastChar == '6' || lastChar == '7' || lastChar == '8' || lastChar == '9' || lastChar == '0' && firstChar != '0'){
        addChar(this.form.display,'.');
    }
    else if (firstChar == '0'){
        addChar(this.form.display,'0' + '.');
    }
    else {
        addChar(this.form.display,'0' + '.');
    }
}// END OF dotCount == 0

else if (dotCount == 1){
    //DO NOTHING
}
  $('#disp').removeClass("result");
  dotCount = 1;
});

(using + as an example):

$('#button-plus').click(function() {
var lastChar = $('#disp').val().slice(-1);
var firstChar = $('#disp').val().slice(0);
if (lastChar == '*' || lastChar == '-' || lastChar == '+' || lastChar == '/' || lastChar == '.' || lastChar == '(' || lastChar == '%'){
    // DO NOTHING
    }
else if (firstChar == '0'){
    // DO NOTHING
    }
else {
  addChar(this.form.display, '+');
  }
  $('#disp').removeClass("result");
  dotCount = 0;
});

Works like a charm! Thanks, Kai Christensen for the counter idea.