button type="submit" 是唯一可靠触发原生校验的方式，必须显式声明 type="submit" 且位于 <form> 内，配合 required 等约束属性；form.requestSubmit() 可替代 form.submit() 触发验证，但需注意浏览器兼容性；实时校验应结合 input 和 blur 事件，调用 reportValidity() 前须清空 setCustomValidity('')；pattern 需锚定 ^$ 并与 required 配合，type="number" 不支持 pattern，自定义组件不参与原生校验。
button type="submit" 是唯一可靠触发原生校验的方式
浏览器只在用户点击 <button type="submit"> 或 <input type="submit"> 时，才走完整 HTML 表单验证流程。用 <button> 默认是 type="button"，点它根本不会触发任何校验；更常见的是 JS 里写 form.submit()，这个方法完全绕过所有约束检查。
必须满足两个条件才能让按钮真正“参与”校验：
-
<button>标签显式声明type="submit"（不能省略） - 该按钮必须位于
<form>标签内部，且表单内至少有一个带required、pattern或其他约束属性的控件
错误写法示例：<button onclick="handleLogin()">登录</button> —— 即使里面调了 form.requestSubmit()，也得先确保按钮本身没干扰表单语义。
form.requestSubmit() 替代 form.submit() 的兼容性要点
form.submit() 是纯 JS 提交，不触发任何原生验证；而 form.requestSubmit() 才会模拟用户点击 submit 按钮的行为，触发 checkValidity()、显示气泡提示、阻止提交（若失败）。
立即学习“前端免费学习笔记（深入）”；
但要注意兼容范围：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- Chrome 69+、Firefox 69+、Safari 14.1+、Edge 79+ 支持
- IE 完全不支持，旧安卓 WebView（如 Android 4.x）也可能 fallback 失败
- 兜底方案不是“加 polyfill”，而是先调
form.checkValidity()，手动判断再决定是否发请求
示例安全写法：
if (form.checkValidity()) {
// 发送 fetch 请求
} else {
form.reportValidity(); // 强制触发提示（即使没点按钮）
}
输入检测不能只靠 submit 事件，blur 和 input 更实用
原生验证默认只在 submit 时触发，用户填错邮箱但没点提交，你根本看不到反馈。想做到实时提示，必须主动监听交互事件：
-
input事件适合密码强度、手机号格式等边输边校验 -
blur事件更适合离开字段后一次性校验（比如确认两次密码一致） - 对单个
<input>调用reportValidity()会只校验它自己，并滚动到该字段（Chrome）、弹出提示（Firefox 可能不滚动） - 调用前必须先设
setCustomValidity('')清空旧状态，否则错误会残留
注意：required 在用户还没 interaction 过的字段上，初始为 :valid 状态，blur 后才变 :invalid —— 所以别用 CSS 伪类做首次加载的样式判断。
pattern 正则不生效？大概率漏了 ^$ 锚定和 required 配合
pattern 只校验整个输入值是否匹配正则，不加 ^ 和 $ 就会误判。例如 pattern="[0-9]{11}" 允许用户输 abc12345678901def —— 因为中间连续 11 位数字就“满足”了。
更关键的是：pattern 对空值无效，必须搭配 required 才能阻止用户不填就提交。
- 手机号推荐写法：
pattern="^1[3-9]\d{9}$"+required - 英文用户名：
pattern="^[a-z]{3,}$"（不是[a-z]{3,}） -
type="number"不支持pattern，别白费劲 - 中文正则慎用
\u4E00-\u9FA5，部分浏览器解析异常，改用[\u4e00-\u9fa5]
最后提醒：所有验证属性只对 <input>、<select>、<textarea> 有效，自定义组件（如封装的 <my-input>）不参与原生校验流程 —— 别指望它自动响应 required。
