HTML模板（）不执行属性验证，因其中元素被浏览器忽略渲染和校验；仅挂载到主文档树的活跃元素才触发required、pattern等原生验证。
HTML模板本身不提供“组件属性强制验证”能力——所谓“组件属性验证”，实际是前端框架（如 Vue、React）或自定义元素（Web Components）的运行时行为，原生 HTML 模板（<template></template>）只是文档片段容器，不解析、不校验、不绑定属性。
为什么<template></template>里写required或pattern没效果
<template></template>内容在解析时被浏览器**完全忽略渲染和验证逻辑**，所有表单约束（required、pattern、minlength等）只对**挂载到主文档树中的活跃元素**生效。把带验证属性的 <input required> 塞进 <template></template>，等于把它“冷冻”了：DOM 存在，但不参与表单生命周期，checkValidity() 返回 true，:invalid 伪类永不匹配。
- 常见错误：用
<template id="form-tpl"></template>定义表单结构，然后innerHTML注入到页面——此时属性才开始起作用，但注入时机必须在用户交互前完成 - 更隐蔽的问题：通过
cloneNode(true)复制<template></template>内容后直接 append，若未调用form.requestSubmit()或未触发blur，验证仍处于“未激活”状态 -
<template></template>中的<form novalidate></form>不会禁用未来实例化后的验证——novalidate只对当前已挂载的<form></form>生效
Vue / React 中“属性强制验证”的真实落点
所谓“组件属性验证”，本质是框架在 props 解析阶段做的运行时检查，和 HTML 原生验证无关。例如 Vue 的 props: { email: { type: String, required: true, validator: v => /.+@.+\..+/.test(v) } }，这个 required 是 JavaScript 层判断，不生成 required 属性，也不影响 <input> 的原生校验行为。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
- 混淆点：开发者常把
v-model绑定的<input required>当作“组件级验证”，其实只是把原生验证透传给了底层 DOM 元素 - 真正需要强制校验的场景（如“至少选两项”），必须在组件
mounted或useEffect中手动监听change事件，调用selectElement.checkValidity()并配合setCustomValidity() - 动态渲染的表单项（如 v-for 循环生成的 input），每个都要单独设置
name和id，否则form.checkValidity()无法定位到具体字段
form.requestSubmit() 是跨模板验证的关键入口
当表单从 <template></template> 克隆并插入 DOM 后，唯一能**安全触发完整原生验证链**的方法是调用 form.requestSubmit()，而不是 form.submit()。后者跳过所有约束检查，前者才会执行 checkValidity()、触发 invalid 事件、显示浏览器默认提示。
立即学习“前端免费学习笔记（深入）”；
- 必须确保克隆后的
<form></form>已 attach 到 document.body 或其子节点，否则requestSubmit()抛错 - 如果模板中用了
<input type="number">，但值为空字符串，checkValidity()返回true（因为 number 类型空值被视为“未填写”，不违反约束），需额外用input.value === ''判断 - 动态添加的
<input pattern="[0-9]{11}">，正则只在非空时生效；若用户删光内容，pattern不再参与校验，required才接管
真正容易被忽略的是：验证不是“写上属性就完事”，而是依赖元素是否处于活动 DOM 树、是否被用户交互触发、是否用对提交方式——<template></template> 只是起点，后续每一步挂载、绑定、提交都可能切断验证链。
