价格区间筛选需联动约束、空值过滤与后端参数对齐：min/max 互设极值并动态更新，提交前剔除空值或NaN，确保后端接收独立price_min/price_max参数。

价格区间筛选不是把两个 并排放就完事——值不联动、提交格式错、空值处理漏，后端一收全是 undefined 或 NaN。

为什么不能只用两个独立的 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 滑块要不要加？怎么加才不翻车

滑块适合快速粗筛，但不能替代数字输入框——它精度低、无法输入精确值、移动端兼容性差。如果要用，必须配同步数值显示：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 用两个 ，分别绑定 price_min 和 price_max，并设置 min/max/step
• 每个滑块旁放一个
  或 实时显示当前值，用 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，而在“空值语义”——用户没填最小价，到底是想查全部低价商品，还是漏填了？这个得靠业务规则定，前端只负责把意图干净传过去，别擅自补默认值或截断范围。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！