（Javascript）帶有數字檢查的輸入

我正在嘗試制作一個簡單的庫存系統。但是我的 oninput 事件有問題。

我想讓 TOTAL GOODS 成為“請在 GOODS IN 中輸入數字”每當每個非數字值插入到 GOODS IN 中時。但是我好像做不到。

/*MAKE EVERY TABLE CLICKABLE AND SHOW ROW DATA IN INPUT TEXT*/

var tbGoods = document.getElementById('tbGoods');
for (var i = 0; i < tbGoods.rows.length; i  ) {
  tbGoods.rows[i].onclick = function() {
    document.getElementById("idTxt").value = this.cells[1].innerHTML;
    document.getElementById("gdTxt").value = this.cells[2].innerHTML;
    document.getElementById("qtyTXT").value = this.cells[3].innerHTML;

    var qty = parseInt(document.getElementById('qtyTXT').value);
    var x = parseInt(document.getElementById('gdin').value);
    var result = qty - x;
    document.getElementById('totalgd').value = result;


  };
}

/*MAKE EVERY NUMBER I PUT IN GOODS IN, TO BE CALCULATED WITHOUT SUBMIT BUTTON (ONINPUT)*/

function testmin() {
  var qty = parseInt(document.getElementById('qtyTXT').value);
  var x = parseInt(document.getElementById('gdin').value);
  var result = qty - x;
  if (document.getElementById('gdin').value === '') {
    document.getElementById('totalgd').value = '0';
  } else if (document.getElementById('qtyTXT').value === '') {
    document.getElementById('totalgd').value = '0';
  } else if (Number.isNaN(document.getElementById('gdin').value)) {
    document.getElementById('totalgd').value = 'Please Input Number in Goods In';
  } else {
    document.getElementById('totalgd').value = result;
  }
}

<form method="post">
  <label>ID</label>
  <input type="text" name="id" id="idTxt" disabled>

  <label>GOODS</label>
  <input type="text" name="goods" id="gdTxt" disabled>

  <label>AVAILABLE QTY</label>
  <input type="text" name="qty" id="qtyTXT" disabled>

  <label>GOODS IN</label>
  <input type="text" name="gdin" id="gdin" oninput="testmin()">
  <br>
  <br>

  <label>Total Goods</label>
  <input type="text" name="totalgd" id="totalgd" value="0" disabled>
  <br>

  <input type="submit" name="submit" value="submit">
</form>

uj5u.com熱心網友回復：

您不需要手動編碼。您可以簡單地將輸入型別設定為“數字”，您的瀏覽器將不允許在該欄位中輸入任何非數字字符。

演示（運行代碼段并嘗試在框中鍵入）：

<input type="number" id="gdin" name="gdin"/>

參考：https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

uj5u.com熱心網友回復：

只需在 TOTAL GOODS 的輸入標簽中添加 type = "number" 即可。它應該防止用戶輸入任何字母表。除了“e”

  <input type="number" name="totalgd" id="totalgd" value="0" disabled>

正如所指出的，如果您想在 TOTAL GOODS 中有字母輸入時顯示警報或其他內容，您只需添加

  <input type="text" name="totalgd" id="totalgd" value="0" oninput = "checkFunction()" disabled>

在函式中，您可以檢查輸入：

function checkFunction() {
 let totalGoodsIn = document.getElementById("totalgd").value; 
 let regExp = /[a-zA-Z]/g;
  
  if(regExp.test(totalGoodsIn))
  {
    //logic if alphabet is present in TOTAL GOODS
  }
  else
  {
    //logic if alphabet is not present in TOTAL GOODS
  }
 
}

如果您希望 GOODS IN 為數字，只需相應地更改標簽的型別

uj5u.com熱心網友回復：

function validateNumberField() {
            var value = $("#numberField").val();
            var pattern = /^\d $/;
            var isValid = pattern.test(value);
            if(!isValid){
                document.getElementById('totalgd').value = 'Please Input Number in Goods In';   
            }
        }

<p>Please enter number :</p>
    <input type="number" id="numberField" name="numberField"
        oninput="validateNumberField()" />

標籤：javascript html 验证

上一篇：如何使用Laravel8驗證來自另一個（買家）表的資料（來自請求）

下一篇：Pydanticconstr與Fieldargs