使用required属性实现搜索框必填校验需满足：表单须在内、由type="submit"触发提交；推荐type="search"并配合oninvalid/oninput自定义中文提示；需处理空格输入、移动端兼容及placeholder、enterkeyhint等体验优化。
直接用 required 属性就能实现，但必须满足几个关键前提，否则它看起来“没反应”。
确保表单结构和提交方式正确
原生校验不是加了属性就自动生效，它依赖浏览器的提交机制：
- 搜索框必须放在
<form></form>标签内部 - 提交动作得由
<button type="submit"></button>或<input type="submit">触发；type="button"或 JS 的form.submit()都会绕过校验 - 推荐把搜索框写成：
<input type="search" required placeholder="搜点什么...">，type="search"更语义化，部分浏览器会优化回车行为
让提示更友好、更可控
浏览器默认提示（如“请填写此字段”）不能直接改文字，但可以用 JavaScript 微调：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在搜索框上加
oninvalid="this.setCustomValidity('请输入关键词')" - 再加
oninput="this.setCustomValidity('')"，用户一输入就清掉错误状态 - 这样既保留原生拦截能力，又把提示换成中文，且不会因反复触发导致状态混乱
避免常见失效陷阱
很多“加了 required 却没拦住”的问题，其实出在细节上：
- 用户只输空格，
value.trim() === ""才算空——所以空格会被当作已填，需在 JS 校验时额外处理 -
<select></select>不适用搜索框场景，但如果是带筛选的下拉搜索，注意首项别设value=""又不加disabled - 移动端某些 WebView（如旧版微信）可能忽略
required，可加一层兜底：form.addEventListener('submit', e => { if (!searchInput.value.trim()) { e.preventDefault(); searchInput.reportValidity(); } })
补充体验细节
真正好用的搜索框，不只是“拦住空提交”：
- 加
placeholder提示用户预期内容，比如placeholder="商品名、品牌或型号" - 用
enterkeyhint="search"告诉软键盘显示“搜索”键而非“回车”，提升移动端操作直觉 - 如果想提交按钮随输入实时启禁，监听
input和change事件，用searchInput.checkValidity()判断状态，再控制按钮disabled属性
