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

只有浏览器原生支持验证的元素才响应这些属性：

• （排除 type="hidden"、"button"、"submit"、"reset"）
• （需至少一个带非空 value 的 ）

常见翻车点：

• 在
  或自定义 Web Component 上写 required → 完全无效
• Vue/React 中用 v-model 或 value 受控绑定后，required 仍有效，但前提是属性被正确透传到真实 DOM 节点（React 需用小写 required，不是 Required）
• 对空格、零宽字符（\u200B）判定为“空”，用户肉眼看不见却校验失败

pattern 正则为什么总匹配不准

pattern 的行为和直觉不同：浏览器会自动为正则加上 ^ 和 $ 锚定，但不支持标志位（如 i、g），也不接受 /regex/ 写法。


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
• 写 pattern="[0-9]{11}" → 实际等价于 ^[0-9]{11}$，没问题
• 写 pattern="abc" → 等价于 ^abc$，不是“包含 abc”
• 想忽略大小写？不行，pattern="(?i)abc" 在多数浏览器中被忽略，得用 JS 替代
• 中文匹配 [\u4e00-\u9fa5]{2,10} 在部分安卓 WebView 中失效，建议降级为 JS 校验

为什么加了 required 却没拦住提交

原生验证只在表单通过 submit 行为触发，不是实时的，也不是万能的。

• 用 + form.submit() → 绕过所有验证
• 用 event.preventDefault() 拦截了 submit 事件，但没调 form.checkValidity() 或 form.reportValidity() → 验证静默失败
• JS 直接赋值 input.value = "xxx" → 不触发 input 事件，也不激活验证状态
• 表单外的按钮、回车提交、移动端软键盘“完成”键 → 部分 WebView（如旧版微信）可能不触发 required

setCustomValidity() 怎么避免“卡死”状态

这个 API 有粘性：一旦设过非空字符串，该字段就永久标记为 invalid，直到你显式清空。

• 每次 input 事件里必须先调 input.setCustomValidity("")，否则用户输对了也一直报错
• 在 invalid 事件里设错时，一定要 e.preventDefault()，否则浏览器默认气泡和你的自定义文案会同时出现
• setCustomValidity("手机号格式错误") 后，哪怕用户输入合法号码，checkValidity() 仍返回 false —— 因为你没清空
• 推荐组合：input.addEventListener('input', () => input.setCustomValidity('')) + blur 或 submit 时按需设错

真正容易被忽略的是：所有这些声明式属性都只控制客户端提示，不替代服务端校验；而 pattern 和 type="email" 的宽松性，常让开发者误以为“前端已验过”，结果后端收到一堆非法数据。