表单校验提示的核心是帮用户快速定位错误并知道如何修正，需精准字段绑定、明确语言、合理时机（失焦为主、提交兜底）、友好样式（下方红字/顶部banner）及及时状态清理（setCustomValidity('')）。

表单校验失败时，自定义提示的核心目标不是“告诉用户错了”，而是“帮用户立刻知道错在哪、怎么改”。关键在于精准定位、语言明确、时机合理、样式友好。

提示要直指具体字段和原因

避免笼统说“请检查信息”，而应绑定到对应输入框，并说明问题本质：

• ❌ “输入有误” → ✅ “手机号必须是11位数字，不能含字母或符号”
• ❌ “格式不正确” → ✅ “邮箱需包含@和域名，例如 name@example.com”
• ❌ “请填写” → ✅ “用户名不能为空，且至少2个字符”

HTML5 原生验证中，可通过 setCustomValidity() 设置这类文案；Layui 中可在 form.verify() 函数里直接 return 字符串；Element Plus 则在 rules 的 message 字段写明。所有方案都强调：提示内容必须带上下文（字段名+错误类型+正确示例）。

提示出现的时机要符合用户操作节奏

太早（如每输一个字就校验）干扰输入，太晚（只等提交才报错）增加挫败感。推荐分层触发：

DeepBI DHTML 页面生成器

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

下载

• 失焦时（blur）：适合必填、格式类校验（如邮箱、手机号），用户离开字段即反馈，无需等待提交
• 提交时（submit）：兜底校验，汇总全部错误，避免漏判；可统一展示在表单顶部或各字段下方
• 输入中（input）慎用：仅限强实时场景（如密码强度条），且只清空错误状态（setCustomValidity('')），不主动报错

提示样式与位置要清晰可见、不遮挡操作

原生气泡（reportValidity）在移动端易被键盘遮挡，建议按场景选择：

• Web 端表单：将提示文字插入输入框下方 红色小字 区域，配合 input 边框变红，视觉一致
• 弹窗类提示（如 Layui 的 lay-vertype="alert"）适合严重错误（如重复注册），但不宜高频使用
• 顶部 banner（如 lay-vertype="msg"）适合提交后集中反馈，便于用户快速扫读全部问题

无论哪种形式，都要确保提示不覆盖输入框、不与按钮重叠、在小屏设备上完整显示。

状态管理必须及时清理，避免残留错误

用户修改后提示仍存在，是最伤体验的问题。根本原因是没正确重置验证状态：

• 调用 setCustomValidity('') 是唯一有效重置方式；传 null、undefined 或空格 ' ' 都无效，仍会被视为错误
• 在 input 或 blur 回调中，只要输入合法，就必须执行这一步
• Layui 中若用了 form.verify()，返回字符串即触发提示；若输入变合法，函数应自然退出（不返回任何值），让框架走默认逻辑或 lay-reqtext