html中required和pattern仅对原生可验证元素（如input[type]除hidden/button等、select、textarea）生效，且只在表单submit事件中触发；动态创建需挂载dom，js提交需用requestsubmit()或手动调用checkvalidity()。
HTML 模板本身不处理组件属性验证——它只负责渲染，验证逻辑必须由宿主环境（如浏览器原生表单、Vue、React）或手动 JavaScript 补充。所谓“声明式方法”，在纯 HTML 中仅指 required、pattern、minlength 等属性的直接使用，但这些属性只对原生可验证元素生效，且仅在提交时触发。
哪些 HTML 元素支持 required 和 pattern
只有浏览器原生支持验证的元素才响应这些属性：
-
<input>（排除type="hidden"、"button"、"submit"、"reset"） -
<select></select>（需至少一个带非空value的<option></option>） <textarea></textarea>
常见翻车点：
- 在
<div> 或自定义 Web Component 上写 <code>required→ 完全无效 - Vue/React 中用
v-model或value受控绑定后，required仍有效，但前提是属性被正确透传到真实<input>DOM 节点（React 需用小写required，不是Required） -
<input type="text" required>对空格、零宽字符（\u200B）判定为“空”，用户肉眼看不见却校验失败 - 写
pattern="[0-9]{11}"→ 实际等价于^[0-9]{11}$，没问题 - 写
pattern="abc"→ 等价于^abc$，不是“包含 abc” - 想忽略大小写？不行，
pattern="(?i)abc"在多数浏览器中被忽略，得用 JS 替代 - 中文匹配
[\u4e00-\u9fa5]{2,10}在部分安卓 WebView 中失效，建议降级为 JS 校验 - 用
<button type="button"></button>+form.submit()→ 绕过所有验证 - 用
event.preventDefault()拦截了submit事件，但没调form.checkValidity()或form.reportValidity()→ 验证静默失败 - JS 直接赋值
input.value = "xxx"→ 不触发input事件，也不激活验证状态 - 表单外的按钮、回车提交、移动端软键盘“完成”键 → 部分 WebView（如旧版微信）可能不触发
required - 每次
input事件里必须先调input.setCustomValidity("")，否则用户输对了也一直报错 - 在
invalid事件里设错时，一定要e.preventDefault()，否则浏览器默认气泡和你的自定义文案会同时出现 -
setCustomValidity("手机号格式错误")后，哪怕用户输入合法号码，checkValidity()仍返回false—— 因为你没清空 - 推荐组合：
input.addEventListener('input', () => input.setCustomValidity(''))+blur或submit时按需设错
pattern 正则为什么总匹配不准
pattern 的行为和直觉不同：浏览器会自动为正则加上 ^ 和 $ 锚定，但不支持标志位（如 i、g），也不接受 /regex/ 写法。
为什么加了 required 却没拦住提交
原生验证只在表单通过 submit 行为触发，不是实时的，也不是万能的。
setCustomValidity() 怎么避免“卡死”状态
这个 API 有粘性：一旦设过非空字符串，该字段就永久标记为 invalid，直到你显式清空。
真正容易被忽略的是：所有这些声明式属性都只控制客户端提示，不替代服务端校验；而 pattern 和 type="email" 的宽松性，常让开发者误以为“前端已验过”，结果后端收到一堆非法数据。
