如何让HTML数字输入框为空时返回null而非默认值0？

问题背景 #

使用以下HTML数字输入框时，用户留空字段后表单提交会返回默认值0，即使设置value=""或value="null"也无法解决：

<div class="form-group col">
  <label for="expLow1">Lower treshold (Exposure)</label>
  <input type="number" step="0.01" id="expLow1" name="expLow1" class="form-control" placeholder="ex: 2" >
</div>

解决方案 #

前端拦截处理 #

通过JavaScript监听表单提交事件，手动干预空值的提交逻辑：

方案1：移除空字段的name属性（后端未收到则视为null）

<form id="exposureForm">
  <div class="form-group col">
    <label for="expLow1">Lower treshold (Exposure)</label>
    <input type="number" step="0.01" id="expLow1" name="expLow1" class="form-control" placeholder="ex: 2" >
  </div>
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('exposureForm').addEventListener('submit', function(e) {
  const input = document.getElementById('expLow1');
  if (input.value.trim() === '') {
    // 移除name属性，表单提交时不会携带该字段
    input.removeAttribute('name');
  }
});
</script>

方案2：将空值设为"null"提交（需后端支持解析）

如果后端框架可识别字符串"null"并转换为null类型，可直接修改提交值：

document.getElementById('exposureForm').addEventListener('submit', function(e) {
  const input = document.getElementById('expLow1');
  if (input.value.trim() === '') {
    input.value = 'null';
  }
});

后端接收处理 #

无论前端提交空字符串还是未携带字段，后端在接收时手动转换为null：

Python Flask示例

from flask import request

@app.route('/submit', methods=['POST'])
def submit_form():
    exp_low = request.form.get('expLow1')
    # 空值或空白字符串转为null，有效输入转为浮点数
    processed_exp_low = float(exp_low) if exp_low and exp_low.strip() else None
    # 后续业务逻辑处理
    return 'Success'

Node.js Express示例

app.post('/submit', (req, res) => {
  const expLow = req.body.expLow1;
  const processedExpLow = expLow && expLow.trim() ? parseFloat(expLow) : null;
  // 后续业务逻辑处理
  res.send('Success');
});

说明 #

number类型输入框的空值被解析为0是多数表单处理库的默认行为，它们会将空的数字输入视为"0"处理。通过前端拦截修改提交数据，或后端手动转换空值，都可以实现返回null的需求。

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