阶梯定价计算器JS开发求助：限制最小值与欧元格式输出

问题解决方案 #

解决后的完整代码

JavaScript

$(function() {
  var tier_prices = [
        { minQty: 100, unitPrice:2.57 },
        { minQty: 150, unitPrice:1.86 },
        { minQty: 200, unitPrice:1.50 }
  ];
  
  // 定义欧元价格格式化函数
  const formatEuroPrice = (amount) => {
    return new Intl.NumberFormat('de-DE', {
      style: 'currency',
      currency: 'EUR',
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(amount);
  };

  $('#quantity').on("change input keyup", function() {
    let qty = +this.value;
    
    // 处理最小值限制，避免NaN
    if (qty < 100 || isNaN(qty)) {
      qty = 100;
      $(this).val(qty);
    }
    
    let price;
    // 匹配对应阶梯单价
    for (var i = 0; i < tier_prices.length && qty >= tier_prices[i].minQty; i++) {
      price = tier_prices[i].unitPrice;
    }
    
    // 格式化并输出价格
    $('#price_output').text(formatEuroPrice(price * qty));
  });
  
  // 页面加载时自动计算默认价格
  $('#quantity').trigger('input');
});

HTML

<input type="number" id="quantity" name="quantity" min="100" max="500" value="100">
<p id="price_output"></p>

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

关键修改说明

• 输入最小值限制：在事件处理逻辑中增加输入值校验，当输入小于100或为非数字时，自动将输入框值重置为100，彻底避免NaN输出；同时页面初始化时触发输入事件，确保默认显示100对应的阶梯价格。
• 欧元格式格式化：使用原生Intl.NumberFormatAPI，指定德语区域（de-DE）的欧元货币规则，自动实现欧元符号前置、逗号作为小数分隔符的格式，同时强制保留两位小数，完全匹配€257,20的需求。

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