required、type、pattern需组合使用且依赖submit触发：required仅校验空值（非格式），必须置于form内并用type="submit"按钮或回车提交；type="email"校验宽松，精准格式须用pattern；pattern不作用于number类型，且需配合title和setCustomValidity("")清空错误状态。
required、type、pattern 这三个属性就能覆盖 80% 的基础验证需求，但必须用对时机和组合方式，否则形同虚设。
为什么加了 required 却没反应？
不是属性失效，而是触发条件没满足：required 只在表单提交（submit 事件）时校验，且只检查是否为空字符串或未选中状态，不看内容格式。
- 必须用
<form>包裹输入框，否则浏览器不识别为表单控件 - 提交按钮得是
<button type="submit">或<input type="submit">；用type="button"或 JS 直接调form.submit()会跳过所有原生验证 -
type="number"的required会忽略纯空格，但接受"123 "（尾部空格）；type="date"的required只在完全未选择时报错，选了非法值如"9999-99-99"也不拦 - 校验失败时，
element.validity.valueMissing为true，这是判断“必填未填”的可靠依据，别依赖value === ""
type="email" 和 pattern 到底该用哪个？
type="email" 是语义化捷径，但校验极宽松：只要含一个 @ 和至少一个点号（如 a@b.c），连 user@localhost 都能过；pattern 才是真正可控的格式锁，但有硬约束。
-
pattern只对type="text"、"email"、"url"、"password"等生效，对type="number"完全无效 - 浏览器自动把你的正则包进
^$，所以写pattern="[a-z]{3,}"就行，别写pattern="^[a-z]{3,}$"（Chrome 会报 Invalid regular expression） - 中文需显式写入，如
pattern="[u4e00-u9fa5a-zA-Z0-9]{2,10}"，w不匹配汉字 - 想排除开头数字？用负向先行断言：
pattern="(?!d)[a-zA-Z0-9]{6,12}"（注意 JS 字符串里双反斜杠："(?!\d)[a-zA-Z0-9]{6,12}"）
如何让验证实时反馈，而不是等提交？
原生验证默认只在提交时触发，要实时提示，必须手动调用 API 并处理状态。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
input或blur事件，在回调里调element.checkValidity()判断结果，再决定是否显示提示 - 要用
element.reportValidity()才能弹出浏览器默认气泡——但 Firefox 不滚动到错误字段，Chrome 会；若需统一行为，建议自己渲染错误文案 - 自定义提示必须配合
setCustomValidity()：校验失败时传字符串（如input.setCustomValidity("手机号格式不对")），通过时必须传空字符串（input.setCustomValidity("")），否则旧错误残留导致永远无法提交 -
invalid事件可捕获校验失败，但默认会触发气泡，需event.preventDefault()拦截，再配合setCustomValidity()手动控制
novalidate 放错位置就彻底失效
这个属性只对 <form> 标签有效，加在按钮或 input 上毫无作用。禁用后，所有原生约束（required、pattern、min）全部失效，你得 100% 自己补全逻辑，包括空值、格式、异步唯一性（如用户名是否存在）。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<form novalidate> - 错误写法：
<button novalidate>或<input novalidate> - 移动端低端 WebView 有时因验证气泡卡顿，才考虑
novalidate+ 全 JS 实现；现代浏览器没必要 - 禁用后，
:valid/:invalid伪类也不再响应，CSS 视觉反馈同步丢失
setCustomValidity('') 的清空动作——漏掉一次，整个字段就永久“假失败”。 
