搜索表单提交前必须校验q（非空且≤100字符、禁SQL关键字）、page（≥1正整数）、limit（10–100正整数），覆盖手动输入与URL回填，结合HTML5原生校验与JS自定义提示，并坚持后端二次校验。
搜索表单提交前必须校验哪些参数
用户输空、输特殊字符、输超长关键词，都可能让后端查询失败或返回错误结果。校验不是为了“拦住用户”，而是提前暴露问题、避免无效请求。重点校验三项：q（搜索关键词）、page（页码）、limit（每页条数）。
-
q必须非空且长度 ≤ 100 字符；允许中文、字母、数字、常见符号（如-_.），但拒绝 SQL 注入特征（如' OR 1=1、UNION SELECT） -
page和limit必须是正整数，page≥ 1，limit建议限制在 10–100 之间 - 校验应同时覆盖用户手动输入和 URL 参数回填（比如从搜索结果页点“上一页”再回来）
用 checkValidity() + 自定义 setCustomValidity() 控制原生提示
HTML5 表单自带校验能力，但默认只管 required、pattern 这类简单规则。对语义化更强的判断（比如“不能全是空格”或“不能含 SQL 关键字”），得靠 JS 手动干预。
关键不是重写整个校验逻辑，而是用原生机制接管提示流：先调用 element.checkValidity() 触发默认检查，再用 element.setCustomValidity(msg) 覆盖错误信息。
<input type="text" id="search-q" name="q" required pattern="^[\w\u4e00-\u9fa5\-\. ]{1,100}$">
上面的 pattern 能防大部分非法字符，但无法拦截 " "（纯空格）或 "' OR"。所以还需：
立即学习“前端免费学习笔记（深入）”；
- 监听
input和submit事件 - 对
#search-q取值后先.trim()，为空则setCustomValidity("请输入有效关键词") - 用
includes()或正则检测低风险关键字（如/select|union|drop/i），命中则设对应提示 - 每次修改后必须调用
element.reportValidity()才能触发 UI 提示
后端校验不能省，前端只是第一道过滤网
前端校验可被绕过——禁用 JS、改 DOM、直接发 POST 请求都能跳过。所以 q 到达后端时，仍要重复 trim、长度截断、关键字过滤（建议用白名单而非黑名单）、参数绑定（如用 PDO 的 prepare()）。
- 前端提示“关键词过长”，后端仍要
substr($q, 0, 100)再查，否则可能因字段长度超限报错 - 前端放行了
limit=200，后端得强制修正为min(200, 100)，防止数据库压力突增 - URL 中的
?q=xxx&page=abc会被前端忽略（page不是数字），但后端解析时若没类型转换，可能把"abc"当成 0 或 null，导致查第 0 页
搜索参数校验容易漏掉的边界点
最常出问题的地方不在主逻辑，而在边缘场景：
- 用户粘贴内容带不可见字符（如零宽空格
u200b），.trim()无效，得用.replace(/[u200b-u200fu202a-u202fu2060-u206fufeff]/g, '')清理 - 移动端软键盘回车提交时，
submit事件可能比input事件晚触发，导致最后一次输入没来得及校验——应在submit回调里再跑一遍校验逻辑 -
history.pushState()更新 URL 后，如果用户刷新页面，表单值来自 URL 参数，此时不会触发input事件，校验逻辑必须在页面加载时主动执行一次
这些点不写进代码，上线后就会变成“偶尔搜不出来”“换个手机就报错”的玄学问题。
