使用setCustomValidity()设置非空字符串可接管浏览器默认验证提示，传空字符串''才能清除错误；需调用reportValidity()或表单提交触发显示，配合invalid事件拦截原生气泡并手动渲染UI。

直接用 setCustomValidity() 设置提示文字，再配合 reportValidity() 或表单提交触发显示。关键不是“覆盖”，而是“接管”——浏览器一旦看到你设了非空字符串，就放弃默认文案，改用你写的那句。

设置和重置错误文案

每个可验证表单控件（input、select、textarea）都有 setCustomValidity() 方法：

• 传入非空字符串（如 '手机号格式不正确'），该字段立即变为无效状态，且 validationMessage 就是你设的这句话
• 必须传 ''（空字符串），才能真正清除自定义错误、恢复校验逻辑；传 null、undefined 或空格都会被当错误处理
• 常见写法是在 input 或 blur 事件里动态判断并设置：
  例如邮箱为空时设提示，输入合法后立刻 setCustomValidity('')

让提示真正显示出来

只调 setCustomValidity() 不会弹窗。必须主动触发验证流程：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 调 reportValidity()：立即显示气泡提示，适合失焦、按钮点击等非提交场景
• 在 submit 事件中调用：先 e.preventDefault() 阻止默认行为，再 form.checkValidity() 判断，失败则对各字段调 reportValidity() 或手动收集错误
• 注意：若表单加了 novalidate 属性，或控件被 disabled，reportValidity() 会静默失效

拦截原生提示，改用手动 UI

浏览器默认气泡无法用 CSS 修改样式，想统一风格就得禁用它：

• 监听 invalid 事件，在里面 e.preventDefault()，阻止气泡弹出
• 再把 el.validationMessage 写进页面指定区域（比如字段下方的
  ）
• 提交时可遍历所有表单元素，批量收集错误文案，集中展示在顶部或各字段旁

配合 CSS 控制视觉反馈

仅靠文案不够，用户需要明确知道哪项错了：

• 用 :invalid:user-invalid 组合伪类控制样式——:invalid 单独用会在页面加载时就标红未填项，加上 :user-invalid 才保证“用户操作过且失败”才生效
• 对 select 这类不自动标红的控件，需用 JS 手动添加 .error 类，并配 CSS 定义边框/阴影
• 别忘了清空错误时同步移除 class 和 DOM 中的提示文字

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