data-*属性值本身无无效概念，浏览器不校验；所谓“无效”实为语义问题，需JS主动过滤，如trim判空、白名单校验、正则匹配等，且写入必须用setAttribute()确保DOM同步。
data-* 属性值本身没有“无效”概念，只有不合法写法
HTML 规范里压根没有“data 属性值是否有效”的校验机制。你写 data-status="pending" 或 data-status=" "，浏览器都照单全收——不会报错、不触发警告、也不影响解析。所谓“无效字段值”，实际是开发者自己定义的语义问题，比如空字符串、全空白、非法枚举值（data-role="adminn" 拼错）、或类型错乱（data-count="many" 本该是数字）。过滤动作必须由 JS 主动做，不能指望浏览器代劳。
用 dataset 读取后立刻做基础清洗
element.dataset 是最常用入口，但它返回的值全是字符串，且不自动 trim 或判空。直接拿 dataset.status 去比对，很容易被首尾空格、换行符、全角空格坑到。
- 空值判断别只写
if (!dataset.foo)—— 它对" "、"\n"、" "（全角空格）都返回 true，但这些不是严格意义上的空 - 推荐统一用
dataset.foo?.trim() === ""判空，?.防止 undefined 报错 - 枚举类字段（如
data-state="active"）建议建白名单数组：const validStates = ["active", "inactive", "pending"]，再用validStates.includes(dataset.state?.trim()) - 数值类字段（
data-priority="2"）别直接parseInt()，先检查是否匹配/^\d+$/，避免"2px"或"2.5"混入
过滤逻辑必须和使用场景强绑定
同一个 data-* 值，在不同上下文里“有效”标准完全不同。比如 data-id 在渲染列表时要求非空且为数字，但在 CSS 选择器里只要存在即可生效：[data-id] 不关心值是什么。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- CSS 里用
[data-loaded="true"]控制显隐，那"1"、"yes"就算“无效”，必须严格等于"true"字符串 - JS 传参给函数时，
dataset.timeout被当作毫秒数用，就得拒绝"0"（可能表示禁用）或负值 - 服务端回传的
data-api-url必须以https://开头，否则过滤掉——这个规则 HTML 本身完全不管 - 别在全局加“统一 data 值过滤中间件”，容易误伤。按需在调用点附近做最小范围校验
容易被忽略的 DOM 同步陷阱
很多人以为改了 dataset.xxx 就等于更新了属性，结果后续用 getAttribute('data-xxx') 读出来还是旧值。这是因为 dataset 是只读代理，真正写入 DOM 必须调用 setAttribute()。
- 过滤后要持久化，必须
el.setAttribute('data-status', cleanedValue)，不能只赋值dataset.status - 如果用 MutationObserver 监听
data-变更，它只响应setAttribute()或removeAttribute()，对dataset.xxx =赋值无反应 - 多个模块同时操作同一
data-字段时，用setAttribute()才能保证 observer 和 CSS[data-xxx]选择器同步更新 - 写入前记得
cleanedValue做 HTML 实体编码（比如含&、"），否则可能破坏 DOM 结构
真实项目里，data 属性的“无效值”从来不是语法错误，而是语义漂移。最危险的不是空字符串，是那个看起来正常、但业务逻辑里根本没定义过的 data-type="legacy"——它不会报错，却会让某个关键分支永远走不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
