JavaScript - 使用函数、子字符串、大小正确输入验证？答案

【问题标题】：JavaScript - Correct input validation using functions, substring, sizes?JavaScript - 使用函数、子字符串、大小正确输入验证？
【发布时间】：2021-05-07 07:53:57
【问题描述】：

下面的程序是一个简单的加法和减法计算器，我一直在努力保持代码简洁，同时避免不良做法。

在 validate() 函数中，我使用布尔值来判断运算符是否重复。

我正在寻找一种类似的方法，但更简单。

要求：

没有重复的操作员输入

var i = -1;var j = -1;

function ins(val) {
      i=-1;
      j=-1;
      document.getElementById("txtField").value += val;
      validate()
}

function plusIns(val) {
      j++
      if (j==0) {
            var str = document.getElementById("txtField").value += val;
      }
      validate()
}

function subIns(val) {
      i++
      if (i==0) {
            var str = document.getElementById("txtField").value += val;
      }
      validate()
}

function validate() {
      let str = document.getElementById("txtField").value;
      let size = document.getElementById("txtField").value.length-1
      let n = str.includes("-+");
      let m = str.includes("+-");
      if (n) {
            document.getElementById("txtField").value = str.substring(0, size);
      }
      if (m) {
            document.getElementById("txtField").value = str.substring(0, size);
      }
}


function clr() {
      document.getElementById("txtField").value = ''
}

function solve() {
      let x = document.getElementById("txtField").value
      let y = eval(x)
      document.getElementById("txtField").value = y
}

body {
    background-color: whitesmoke;
    text-align: center;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h2>Add & Sub Calculator</h2>
        <input type="text" id="txtField" readonly>
        <br>
        <input type="button" value="1" onclick="ins('1')">
        <input type="button" value="2" onclick="ins('2')">
        <input type="button" value="3" onclick="ins('3')">
        <br>
        <input type="button" value="4" onclick="ins('4')">
        <input type="button" value="5" onclick="ins('5')">
        <input type="button" value="6" onclick="ins('6')">
        <br>
        <input type="button" value="7" onclick="ins('7')">
        <input type="button" value="8" onclick="ins('8')">
        <input type="button" value="9" onclick="ins('9')">
        <br>
        <input type="button" value="0" onclick="ins('0')">
        <br>
        <br>
        <input type="button" value="-" onclick="subIns('-')">
        <input type="button" value="+" onclick="plusIns('+')">
        <input type="button" value="Clear" onclick="clr()">
        <input type="button" value="=" onclick="solve()">

    </body>
</html>

【问题讨论】：

标签： javascript html validation input calculator

【解决方案1】：

你可以试试这个最佳做法

function ins(val) {
    let str = document.getElementById("txtField").value;
    let size = document.getElementById("txtField").value.length-1;
    if(val!=='+'&&val!=='-'){
       document.getElementById("txtField").value += val
    }else{
      if(size>-1){
        if(document.getElementById("txtField").value.charAt(size)!=='+' && document.getElementById("txtField").value.charAt(size)!=='-'){
          document.getElementById("txtField").value += val
        }else {
          if(val==='-'){
            if(document.getElementById("txtField").value.charAt(size)==='+'){
              document.getElementById("txtField").value=str.substring(0,size)+val
            }
          }else{
            if(document.getElementById("txtField").value.charAt(size)==='-'){
              document.getElementById("txtField").value=str.substring(0,size)+val
            }
          }
        }  
      }
    }
}

function clr() {
    document.getElementById("txtField").value = ""
}

function solve() {
    let x = document.getElementById("txtField").value
    let y = eval(x)
    document.getElementById("txtField").value = y
}

body {
    background-color: whitesmoke;
    text-align: center;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h2>Add & Sub by CJ</h2>
        <input type="text" id="txtField" readonly>
        <br>
        <input type="button" value="1" onclick="ins('1')">
        <input type="button" value="2" onclick="ins('2')">
        <input type="button" value="3" onclick="ins('3')">
        <br>
        <input type="button" value="4" onclick="ins('4')">
        <input type="button" value="5" onclick="ins('5')">
        <input type="button" value="6" onclick="ins('6')">
        <br>
        <input type="button" value="7" onclick="ins('7')">
        <input type="button" value="8" onclick="ins('8')">
        <input type="button" value="9" onclick="ins('9')">
        <br>
        <input type="button" value="0" onclick="ins('0')">
        <br>
        <br>
        <input type="button" value="-" onclick="ins('-')">
        <input type="button" value="+" onclick="ins('+')">
        <input type="button" value="Clear" onclick="clr()">
        <input type="button" value="=" onclick="solve()">

        <br>
    </body>
</html>

【讨论】：

感谢您的快速回复，但您能指出您的代码与给定代码之间的主要区别吗？为什么这是好的做法。谢谢！
与所讨论的 sn-p 相比，您的代码引入了更多嵌套，所以我不认为它可以被视为最佳实践。另外，sn-p 中的问题对我来说更具可读性，我更喜欢这个。