原生HTML表单验证属性不支持元数据驱动，因浏览器不解析JS对象、pattern对number类型无效、setCustomValidity需手动调用且状态须显式清空；可行方案是用JS基于元数据构建验证逻辑，统一处理类型转换、正则校验与条件规则。
原生 HTML 表单验证属性（required、pattern、min 等）本身不支持“元数据驱动”——它们是静态声明，无法动态注入、批量生成或条件启用。想靠纯 HTML 属性实现大规模表单的元数据驱动校验，会卡死在三个硬限制上：浏览器不解析 JS 对象、pattern 对 type="number" 无效、setCustomValidity 必须手动调用且状态需显式清空。
为什么直接绑定 data-* 属性做校验规则行不通
很多人尝试把校验规则存进 data-validation 或 data-rule，再用 JS 解析执行。但问题在于：
-
pattern属性只在submit时触发，且仅对type="text"、"email"、"tel"生效；写进data-*的正则不会自动挂载到约束系统里 - 浏览器对
type="number"的value是数字类型，但用户粘贴 "123abc" 后value变为空字符串，checkValidity()却仍返回true—— 元数据里写的pattern根本没机会运行 -
required是布尔属性，不能通过data-required="if:country==='CN'"这类表达式动态开关；它要么存在，要么不存在
真正可落地的元数据驱动结构长什么样
核心思路：把元数据当配置源，用 JS 构建验证逻辑，而不是让 HTML 属性自己“活起来”。典型结构如下：
const formSchema = {
username: { required: true, minlength: 3, maxlength: 20 },
email: { required: true, pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i },
age: { type: 'number', min: 18, max: 120 },
phone: { required: true, pattern: /^1[3-9]\d{9}$/, when: () => document.querySelector('[name="country"]').value === 'CN' }
};
关键点：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
when字段替代布尔值，让规则可计算，避免硬编码 DOM 查询 -
pattern存 JS 正则对象，不是字符串，绕过 HTML 的pattern锚点陷阱（不用写^$） -
type: 'number'是语义标记，JS 层统一做Number(value)转换 + 范围判断，不依赖原生type="number"的不可靠行为
如何让每个字段自动接入元数据校验
不能靠属性反射，得靠初始化时显式绑定。推荐做法：
- 遍历
formSchema，为每个字段创建监听器：input[name="username"]绑定blur和input事件 - 每次触发时，先调
element.setCustomValidity('')清空旧状态（否则改对了也弹错） - 按 schema 执行对应校验：长度检查用
value.length，正则用rule.pattern.test(value)，数值范围先转Number再比 - 失败时调
element.setCustomValidity(rule.message || '格式错误')，成功则留空 - 提交前统一调
form.reportValidity()，它会触发所有已绑定的setCustomValidity状态
最易被忽略的一点：元数据里的 pattern 和 HTML 的 pattern 不是同一套东西——前者是 JS 正则，后者是字符串且强制锚点。混用会导致“写了正则却总校验通过”或“明明输对了还报错”，必须物理隔离两套规则来源。
