原生验证需正确触发：必须用type="submit"按钮或form.requestSubmit()；pattern须加^$锚定并配合required；实时提示需调reportValidity()；type="number"的value仍是字符串，需额外校验。
submit事件触发不了原生验证，一定是按钮类型或JS调用错了
浏览器只在用户点击 type="submit" 按钮或调用 form.requestSubmit() 时才走完整验证流程。用 默认是 type="button"，点它不会触发校验；更常见的是 JS 里直接写 form.submit()，这个方法完全绕过所有 HTML 约束检查。
- 必须用
或 - JS 中要提交表单时，改用
form.requestSubmit()（Chrome 69+、Firefox 69+、Safari 14.1+、Edge 79+ 支持） - 旧浏览器兜底可先调
form.checkValidity()，手动判断再决定是否发请求
pattern正则总不生效，大概率没锚定或没配合required
pattern 只校验整个输入值是否匹配正则，不加 ^ 和 $ 就会误判。比如 pattern="[0-9]{11}" 允许用户输 abc12345678901def —— 因为中间连续11位数字就“满足”了。另外，空值时 pattern 不起作用，得搭配 required 才能阻止用户不填就提交。
- 正确写法：
pattern="^[0-9]{11}$"（严格全匹配） - 手机号示例：
- 如果字段允许为空但有格式要求，就得用 JS +
setCustomValidity()补充逻辑
想实时提示错误，不能等submit，得主动调reportValidity()
原生验证默认只在提交时弹气泡，用户填错后不点提交就看不到反馈。要在离开字段（blur）或输入中（input）立刻提示，必须手动调用 reportValidity() —— 它会触发浏览器默认样式和气泡，且自动滚动到出错字段（Chrome）或不滚动（Firefox）。
- 对单个输入：
inputElement.reportValidity() - 对整个表单：
formElement.reportValidity() - 调用前记得先设好错误文案：
input.setCustomValidity("手机号格式不对")，清空用input.setCustomValidity("") - 别在
input事件里无脑调，避免频繁弹窗；建议加防抖或只在blur时触发
type="number"看着像数字，实际value还是字符串，且粘贴内容不拦截
type="number" 的键盘和删除键行为受控，但用户仍可粘贴字母、符号甚至空格。它的 value 始终是字符串，空值时是 "" 而非 null 或 undefined。更关键的是：只要没输非法字符（比如直接敲字母），哪怕粘贴了 "123abc"，validity.valid 也可能返回 true —— 因为浏览器只在输入框失去焦点或提交时才做深层解析。
- 需要强校验时，必须监听
blur或change，用parseFloat(value)+isNaN()判断是否真为有效数字 - 配合
min/max属性比单靠type更可靠 - 移动端唤起数字键盘是优点，但别把它当类型安全的保障
真正难的不是写对那几行 required 或 pattern，而是理解浏览器什么时候“认”这个验证、什么时候“假装看不见”。很多 bug 都卡在事件时机和 DOM 属性更新的微妙差上，比如 setCustomValidity() 后忘了调 reportValidity()，或者 checkValidity() 返回 true 却发现提交时还是被拦——八成是某个字段的 value 还没同步到 validity 状态里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
