如何在单个标签中使用两组data-min/data-max属性实现产品宽厚验证？

嘿，我一眼就看出问题出在哪了！你当前的代码里，给厚度输入框设置min和max的时候，用的是$selected.data('min')和$selected.data('max')，但你的HTML里，第一个产品的厚度范围数据存在**data-min-thickness和data-max-thickness**属性里，而且后面两个产品没有单独标注厚度参数，按照需求我们得给它们设置默认的1-30范围才行。

下面是修正后的完整代码，我会一步步给你解释改动点：

修正后的HTML（优化属性命名，避免混淆） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <select name="product" id="product" class="form-control">
    <option selected="selected" value="">Product type</option>
    <option value="Copper flat" data-min-width="10" data-max-width="200" data-min-thickness="1" data-max-thickness="20">Copper flat</option>
    <option value="Fabricated Copper Busbar" data-min-width="100" data-max-width="2000">Fabricated Copper Busbar</option>
    <option value="Fabricated aluminium Busbar" data-min-width="50" data-max-width="75">Fabricated aluminium Busbar</option>
  </select>
  Width: <input type="number" id="width" required />
  Thickness: <input type="number" id="thickness" required />
  <button>Submit</button>
</form>

注：我把后面两个产品的data-min/data-max改成了data-min-width/data-max-width，这样宽度的取值更清晰，彻底避免和厚度参数混淆。

修正后的JavaScript代码 #

$(function() {
  var $width = $('#width');
  var $thickness = $('#thickness');
  
  // 定义厚度的默认范围（按你的需求设置为1-30）
  const defaultThicknessMin = 1;
  const defaultThicknessMax = 30;

  // 封装更新输入框范围的函数，减少重复代码
  function updateInputRanges(selectedOption) {
    // 更新宽度范围：优先取产品专属的宽度参数， fallback到需求的默认10-200
    const widthMin = selectedOption.data('min-width') || 10;
    const widthMax = selectedOption.data('max-width') || 200;
    $width.prop({ min: widthMin, max: widthMax });

    // 更新厚度范围：优先取产品专属的厚度参数，没有则用默认的1-30
    const thicknessMin = selectedOption.data('min-thickness') || defaultThicknessMin;
    const thicknessMax = selectedOption.data('max-thickness') || defaultThicknessMax;
    $thickness.prop({ min: thicknessMin, max: thicknessMax });
  }

  // 产品选择变化时触发范围更新
  $('#product').change(function() {
    var $selected = $(this).find('option:selected');
    updateInputRanges($selected);
  });

  // 页面初始化时就执行一次范围更新，避免初始状态无验证限制
  updateInputRanges($('#product option:selected'));
});

关键改动说明： #

• 参数对应正确：厚度的取值从data-min-thickness和data-max-thickness获取，不再和宽度共用参数，彻底解决混淆问题。
• 默认值兜底：对于没有单独标注厚度范围的产品，自动使用你需求里的1-30默认值，确保所有产品都有厚度验证。
• 代码更易维护：把更新逻辑抽成函数，后续要调整规则时只需改一处即可。
• 初始化处理：页面加载完成就设置好初始范围，避免用户刚打开页面时输入框没有验证限制。

这样修改后，宽度和厚度的数值范围验证就都能正常工作啦！

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