HTML 数字输入：min、max、step、小数与 valueAsNumber

HTML input type="number" 接收可以比较或增量的数量。min 和 max 设置范围，step 设置有效间隔。允许小数需要同时考虑间隔及其基数；看似数字的电话号码或邮政编码通常需要另一种输入类型。

min · max · step

min 和 max 并不一定能阻止输入超出范围的数字。即使可以输入无效值，普通的表单提交也会被验证阻止。如果该值不能为空，请添加 required。

如果存在，步长基值是一个有效的 min 值，否则是一个有效的 HTML value 属性，如果两者都不存在，则为零。有效值是基于该基值的整数步长。默认间隔为 1，但小数基值可以产生有效的小数值，因此默认值并不普遍禁止小数。

在一个示例中比较整数和小数输入

将此完整代码保存为 number.html 并在浏览器中打开。无需服务器即可比较验证、提交的字符串以及数量和重量的 JavaScript 数值。此练习将重量定义为 0–100 公斤，步长为 0.01 公斤。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>数值范围与步长</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 16px 0 6px; }
    input { width: 12rem; max-width: 100%; box-sizing: border-box; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>输入数量和重量</h1>
  <form id="demo">
    <label for="quantity">数量（1～10，整数单位）</label>
    <input id="quantity" name="quantity" type="number"
      min="1" max="10" step="1" value="2" required>
    <label for="weight">重量（0～100kg，步长0.01kg）</label>
    <input id="weight" name="weight" type="number"
      min="0" max="100" step="0.01" value="1.25" required>
    <p><button type="submit">查看值</button>
      <button type="reset">重置</button></p>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const quantity = document.querySelector('#quantity');
    const weight = document.querySelector('#weight');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify({
        formData: [...new FormData(form).entries()],
        numbers: { quantity: quantity.valueAsNumber, weight: weight.valueAsNumber }
      }, null, 2);
    });
    form.addEventListener('input', () => { result.textContent = ''; });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. 提交初始值。 formData (字符串): "2", "1.25"; numbers (数值): 2, 1.25.
2. 将数量设置为 11 并提交以触发最大值验证。将其设置为 2.5 以进行步长验证，或清空以进行必填验证。将数量恢复为 2。
3. 重量为 1.23 可以提交，但 1.234 不符合间隔。固定小数位格式与有效的数字间隔不同。
4. 仅将数量的 step="1" 更改为 step="3"，然后重新打开文件。因为 min="1"，初始值 2 是无效的，但 4 是有效的。之后将步骤恢复到 1。
5. 重置会将数量恢复为 2，重量恢复为 1.25，并清除结果。

区分看起来像数字的标识符

电话号码、邮政编码和会员ID通常需要保留其原始字符串，而不是进行算术运算。前导零或连字符可能很重要。考虑将 type="tel" 用于电话，将 type="text" inputmode="numeric" 用于看起来像数字的标识符。inputmode 提示的是键盘类型；它不是数字验证规则。

数字输入不要使用 maxlength 或 pattern 来限制数字位数或正则表达式模式。使用 CSS 设置宽度而不是 size。浏览器在字符输入行为、增量箭头和小数分隔符显示上存在差异，因此不要依赖单一显示效果或阻止行为。

在 JavaScript 和服务器端处理数字

input.value 和普通表单提交的值都是字符串。将 valueAsNumber 用于数字；当为空或不可转换时，它返回 NaN。使用 Number() 转换空字符串会得到零，因此如果空值与零意味着不同的含义，首先要区分空值。

仅依靠浏览器验证并不能使一个值可靠。在服务器端也要验证数值格式、有限性、范围和步进。对于需要小数精度的计算，例如金额，要考虑 JavaScript 二进制浮点误差，并使用最小货币单位的整数或适当的小数方法。

MDN 数字输入参考 解释了属性和步进基规则。