PHP找零计算器：如何限制HTML输入框仅输入1-9及小数点？

你当前的type="number"输入框仍允许输入0、正负号等不符合需求的内容，要严格限制输入为1-9数字和小数点，需要结合前端实时拦截和后端验证（前端限制仅提升体验，后端验证是安全底线）。

前端实时限制方案 #

方案1：文本输入框+JS过滤（推荐） #

把type="number"改为type="text"，配合inputmode="decimal"让移动端弹出数字键盘，再通过JS实时过滤非法字符：

<h1 id="title">Transaction Calculator</h1>
<form action="calculatechange.php" method="post">
  <label for="total_cost" id="label1">Total Cost of Transaction</label>
  <input type="text" inputmode="decimal" name="total_cost" id="total_cost" required pattern="[1-9][0-9]*(\.[0-9]{1,2})?">
  <br><br>
  <label for="amount_provided" id="label2">Total Amount of Money Provided</label>
  <input type="text" inputmode="decimal" name="amount_provided" id="amount_provided" required pattern="[1-9][0-9]*(\.[0-9]{1,2})?">
  <br><br>
  <input type="submit" value="Calculate Change" id="changebutton">
</form>

<script>
const restrictedInputs = document.querySelectorAll('#total_cost, #amount_provided');

restrictedInputs.forEach(input => {
  input.addEventListener('input', function() {
    // 过滤规则：仅保留1-9数字和单个小数点，禁止开头为小数点
    this.value = this.value
      .replace(/[^1-9.]/g, '') // 移除所有非1-9、非小数点的字符
      .replace(/(\..*)\./g, '$1') // 确保只有一个小数点
      .replace(/^\./, ''); // 去掉开头的小数点
  });
});
</script>

• pattern属性会让浏览器在提交前自动验证格式，确保输入是1-9开头，可选带1-2位小数的合法金额
• inputmode="decimal"保证移动端用户看到数字键盘，体验和type="number"一致

方案2：按键拦截（补充方案） #

如果想从按键层面直接拦截非法输入，可添加keydown事件监听：

restrictedInputs.forEach(input => {
  input.addEventListener('keydown', function(e) {
    // 允许的按键：1-9、小数点、功能键（回退、删除、方向键、Tab）
    const allowedKeys = ['1','2','3','4','5','6','7','8','9','.', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
    // 禁止非法按键，同时允许Ctrl/Cmd+A全选等操作
    if (!allowedKeys.includes(e.key) && !e.ctrlKey && !e.metaKey) {
      e.preventDefault();
    }
    // 已有小数点时，禁止再输入小数点
    if (e.key === '.' && this.value.includes('.')) {
      e.preventDefault();
    }
    // 禁止开头直接输入小数点
    if (e.key === '.' && this.value.length === 0) {
      e.preventDefault();
    }
  });
});

后端PHP强制验证 #

前端限制可以被绕过，必须在calculatechange.php中对输入做最终验证：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $totalCost = trim($_POST['total_cost']);
  $amountProvided = trim($_POST['amount_provided']);

  // 正则验证：仅允许1-9开头，可选带1-2位小数的正数
  $validPattern = '/^[1-9][0-9]*(\.[0-9]{1,2})?$/';
  if (!preg_match($validPattern, $totalCost) || !preg_match($validPattern, $amountProvided)) {
    die('请输入有效的正数金额，仅允许1-9数字和小数点');
  }

  // 转换为浮点数计算找零
  $totalCost = (float)$totalCost;
  $amountProvided = (float)$amountProvided;

  if ($amountProvided < $totalCost) {
    die('提供的金额不足以支付账单');
  }

  $change = $amountProvided - $totalCost;
  echo "找零金额：" . number_format($change, 2);
}
?>

内容的提问来源于stack exchange，提问作者GalacticLux