在計算字段中防止多個小數點

Question

我有一個JavaScript計算器，它使用以下代碼來處理計算輸入字段中的小數點（也在下面）：

$('#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");
});

其中的addChar函數由以下形式給出：

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

和輸入字段：

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

我想通過限制用戶輸入相同數字的多個小數（如下所示）的方式來增強我的代碼，同時仍允許計算字符串中的多個小數（也如下所示）：

避免這種情況-

但是允許這個-

我了解了問題的解決方案可能會涉及到regex ，但是我不確定如何實現它（我的JavaScript技能仍在開發中！）。

我還考慮過用任何操作數（ -,+,/,*,% ）分割字符串，並檢查結果數組的每個元素是否有小數點，但我認為這可能有點混亂。

有任何想法嗎？

Answer 1

我將創建一個計數器變量，然后在每次遇到時將其添加一個. ，而每次找到操作數時都重置為零。 這樣，如果您的計數器在for循環結束時不止一個，那么您就可以提醒用戶擺脫點的困擾。

偽代碼：

// 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

您可以使用單個正則表達式輕松完成此操作：

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

說明

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

Answer 3

是的，您可以使用以下正則表達式來驗證用戶輸入：

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

• \\d+(\\.\\d+)? 匹配小數
• [+\\-*\\/]匹配運算符

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

如果輸入字符串匹配\\d\\.\\d+\\.則可能觸發錯誤函數\\d\\.\\d+\\. -這是一個數字，后跟小數點，然后是1個或多個數字，后跟另一個小數點。 如果第一個小數點后沒有數字（例如運算符），則不會觸發錯誤。

regex101

Answer 5

所以我加了一個計數器：

dotCount = 0;

並對button-dot函數和操作數執行了以下操作：

$('#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;
});

（以+為例）：

$('#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;
});

奇跡般有效！ 謝謝，凱·克里斯滕森（Kai Christensen）提出了反主意。