required属性失效主因是表单结构不合法：input必须嵌套在内，提交按钮须为type="submit"；pattern仅对text类input有效，min/max在number/date类型中行为不同；preventdefault()后需手动校验。
required 属性没反应，先看表单结构是否合法
浏览器只在 <form></form> 内部、且由 type="submit" 触发的提交中执行原生校验。如果 input 没包进 <form></form>，或者用了 <button type="button"></button>，required 就完全不参与判断。
常见错误现象：点击按钮后直接提交，控制台无提示，空值也过审。
-
<form></form>标签必须存在，且所有带required的控件是它的子孙节点（直接或嵌套） - 提交按钮必须是
<button type="submit"></button>或<input type="submit">；type="button"不会触发任何内置验证 - 动态插入的表单（如 JS 创建后
appendChild）需确认form.isConnected === true，否则报错"Form submission canceled because the form is not connected"
pattern 和 min/max 校验失效，检查 type 和属性匹配关系
pattern 只对文本类 input 有效：包括 type="text"、"email"、"tel"、"search" 等；写在 type="number" 上会被浏览器忽略。
min/max 在不同 type 上行为割裂：
-
type="number"：实时拦截，输入小于min的值会被卡住或清空 -
type="date"：仅提交时校验，且要求值严格为YYYY-MM-DD格式（"2023-1-1"或"2023/01/01"都解析失败，value变为空，触发valueMissing） -
pattern会被浏览器自动包裹^$，你再写^[a-z]+$就变成^^[a-z]+$，直接报Invalid regular expression
onsubmit 事件里调了 preventDefault()，但忘了手动校验
一旦用 e.preventDefault() 拦截了原生提交，整套 HTML5 验证就彻底失效——浏览器不会自动跑 checkValidity()，也不会弹气泡。
修复方式不是“去掉 preventDefault()”，而是补上校验逻辑：
- 在事件处理器开头加
if (!e.target.checkValidity()) return e.preventDefault(); - 不要混用
reportValidity()和submit()：先reportValidity()提示用户，仅当checkValidity()返回true时才走后续提交逻辑 -
setCustomValidity("xxx")后必须显式调用setCustomValidity("")清空，否则该字段永远 invalid，哪怕用户已填对
验证气泡不显示，优先排查 CSS 和元素状态
reportValidity() 不是万能的：它只对可见、可交互、未被 disabled 的元素生效。隐藏元素（display: none 或 visibility: hidden）上调用它，什么都不会发生。
即使元素可见，也可能因样式覆盖导致气泡不可见：
- 检查是否重置了
::-webkit-validation-bubble或设置了outline: none，这些会压住或透明化默认提示 - 确保
input.willValidate === true：如果父<form></form>有novalidate，或控件被设为disabled，willValidate为false，此时读validity所有属性都无效 - Safari 对
type="date"和type="time"的validity支持不稳定，建议 fallback 到input.value.length或正则判断
最常被忽略的是 autocomplete 缺失——Chromium 内核浏览器检测到 username/password 字段却没配 autocomplete，会主动禁用原生验证以避免与密码管理器冲突。这不是兼容性优化，是强制项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
