多条件筛选应使用原生<form>实现结构语义化与状态集中管理：name严格对齐后端参数，统一用FormData解析；避免手动遍历DOM或错误命名如brand[]；读取时用entries()或getAll()，注意空值过滤与UI状态同步。
多条件筛选不是靠一堆 if 堆出来的，核心是「结构语义化 + 状态集中管理」。用原生 <form> 包裹、name 严格对齐后端参数、所有筛选值统一走 FormData 解析，否则加个分页或 URL 同步就卡住。
为什么必须用 <form> 而不是 <div>
不用 <form> 的后果很直接：你得手动遍历每个 <input>、判断 type、处理多选、拼 query string——而且一改 DOM 结构，JS 就断。而 <form> 天然支持：
-
form.elements直接拿到所有控件，包括checkbox和select[multiple] -
new FormData(form)自动忽略未选中的checkbox、合并同名name（如多个brand）、跳过disabled项 -
form.checkValidity()可配合required做基础校验，不用自己写正则
常见错误：把 <form> 改成 <div class="filter-form">，然后 JS 里用 document.querySelectorAll('[name]') 硬捞——一旦加个动态渲染的筛选项，name 属性漏了或拼错，整个采集逻辑就失效。
name 怎么命名才不踩坑
name 不是随便起的类名，它必须和后端 API 的 query 参数名完全一致，比如后端接收 ?price_min=100&price_max=500&category=phone，那前端就得：
立即学习“前端免费学习笔记（深入）”；
-
<input name="price_min" type="number">和<input name="price_max" type="number">——别合并成一个price_range再切分 -
<select name="category"><option value="phone">手机</option></select>——别用data-value模拟 -
<input name="brand" type="checkbox" value="apple">——多个同名checkbox是合法且必要的，浏览器会自动提交选中的那些
特别注意：name="brand[]" 是 PHP 风格，在纯 HTML/JS 场景下毫无意义，FormData 不会识别方括号，反而导致后端收不到数据。
JS 怎么高效读取并组合条件
别在每次筛选时手动拼对象，直接用 FormData 转标准键值对：
const form = document.querySelector('form');
form.addEventListener('submit', e => {
e.preventDefault();
const formData = new FormData(form);
const params = Object.fromEntries(formData.entries());
// { brand: "apple", category: "phone", price_min: "100" }
});
但注意几个现实问题：
- 空值要过滤：用户没填价格区间，
price_min和price_max是空字符串，不能直接传给后端，得先if (params.price_min?.trim()) - 多选字段（如
color）可能有多个值，FormData.entries()只返回第一个，要用FormData.getAll('color') - 布尔型字段（如是否「仅显示有货」）建议用
<input type="checkbox" name="in_stock" value="1">，勾选才提交，比value="true"更安全
筛选逻辑里最容易漏掉的状态同步
用户点完「重置」或换了个分类，列表更新了，但搜索框还留着上回的关键词、价格滑块没归位、分页数还是第 3 页——这种不同步比功能不工作更伤体验。每次触发筛选前，必须做三件事：
-
input.value = ""清空文本类控件 -
select.selectedIndex = 0或select.value = ""重置下拉 -
checkbox.checked = false手动清掉复选框（FormData不会提交未勾选的 checkbox，但 UI 状态得同步）
更关键的是：这些清理动作必须在读取 FormData 之前执行。否则你清空了输入框，但读取的是旧值；或者清空了，又立刻被 JS 重新赋值——状态就乱了。
