价格区间筛选需联动约束、空值过滤与后端参数对齐：min/max 互设极值并动态更新，提交前剔除空值或NaN，确保后端接收独立price_min/price_max参数。
价格区间筛选不是把两个 <input type="number"> 并排放就完事——值不联动、提交格式错、空值处理漏，后端一收全是 undefined 或 NaN。
为什么不能只用两个独立的 number 输入框
单独放 <input name="price_min" type="number"> 和 <input name="price_max" type="number"> 看似简单，但实际会遇到三个硬伤：
- 用户先输
price_max=100，再输price_min=500，逻辑矛盾却无提示 - 任一为空时，
FormData仍会提交该字段（值为""），后端解析成空字符串而非忽略 - 没做
min/max属性约束，用户可能输负数或超大数，触发浏览器默认校验失败但不友好
正确做法：绑定联动 + 空值过滤 + 后端对齐
核心是让两个输入框互相约束，并在提交前清理无效状态：
- 给
price_min设置max属性，初始值设为Infinity；监听price_max的input事件，动态更新它的max - 同理，给
price_max设置min，并监听price_min更新 - 提交前用
FormData转对象，手动删掉值为空或非数字的项：if (isNaN(Number(val)) || val === "") delete params[key] - 确保后端接收的是
price_min和price_max两个独立参数，不要合并成price_range字符串再拆分
range 滑块要不要加？怎么加才不翻车
滑块适合快速粗筛，但不能替代数字输入框——它精度低、无法输入精确值、移动端兼容性差。如果要用，必须配同步数值显示：
立即学习“前端免费学习笔记（深入）”；
- 用两个
<input type="range">，分别绑定price_min和price_max，并设置min/max/step - 每个滑块旁放一个
<output></output>或<span></span>实时显示当前值，用oninput更新 - 滑块和数字框要双向绑定：改滑块 → 数字框变；改数字框 → 滑块位置变（用
element.valueAsNumber读写） - 禁止让用户拖出反向区间：当
min > max时，自动交换两者值，而不是报错或卡住
FormData 提交时 price_min/price_max 怎么不出错
直接 new FormData(form) 是最简路径，但要注意三处细节：
- 两个 input 的
name必须严格是"price_min"和"price_max"，别加下划线以外的符号（如price-min或min_price） - 不要给它们设
required—— 区间可单侧生效（比如只设上限），required会强制填两头 - 提交后用
Object.fromEntries(formData.entries())得到对象，但注意：若某 input 为空，它的值是""，需额外过滤，例如：const params = Object.fromEntries([...formData.entries()].filter(([k, v]) => v !== ""))
价格区间真正的难点不在 UI，而在“空值语义”——用户没填最小价，到底是想查全部低价商品，还是漏填了？这个得靠业务规则定，前端只负责把意图干净传过去，别擅自补默认值或截断范围。
