HTML5表单验证默认开启，required校验非空、pattern校验格式，但受类型和浏览器影响；type="number"忽略pattern，hidden字段不验证；需用checkValidity()或submit事件调试，form.submit()绕过验证。
HTML5 表单验证默认就开启，不需要额外“开启”；required 和 pattern 是原生属性，直接写在 上即可生效，但行为受浏览器、类型、用户交互方式影响。
r
required 是布尔属性，只要元素有该属性（哪怕值是空字符串或 required="false"），浏览器就会在提交时检查其值是否为“非空”。注意：
-
type="number"时，空输入算“未填写”，但输入" "（空格）会被自动 trim，而输入"abc"会触发validity.badInput === true，此时required不再是主要错误原因 -
type="email"或type="url"自带基础格式校验，required仅负责“非空”，二者独立触发 - 隐藏字段（
type="hidden"）加required无效，浏览器跳过验证 - 使用 JavaScript 动态设置
input.required = true会立即生效，但需确保元素已挂载到 DOM
pattern 属性必须配合 type="text" 类型才稳定生效
pattern 接收一个正则表达式字符串（不带 /g 标志，也不写首尾 /），仅对 type="text"、"search"、"tel"、"url"、"email"、"password" 等文本类输入有效。常见陷阱：
-
type="number"忽略pattern—— 浏览器优先执行数字解析，非法字符根本进不到 pattern 匹配阶段 - 正则默认是“全匹配”，即等价于
^your-pattern$；想允许开头/结尾空格？得显式写进 pattern，例如pattern="^\s*[0-9]{3}\s*$" - 中文字符需注意 Unicode 范围，
pattern="[\u4e00-\u9fa5]{2,10}"可匹配 2–10 个汉字，但 Safari 对 \u 转义支持较弱，建议用[\u4e00-\u9fa5]而非\p{Han}（后者不被原生支持） - 错误提示文案不可自定义（除非用
setCustomValidity()），且只有在用户尝试提交或调用checkValidity()时才显示
提交时验证失败的典型表现与调试方法
当表单提交被阻止，说明至少一个控件验证失败。可通过以下方式定位问题：
- 监听
submit事件，调用event.preventDefault()后遍历所有form.elements，检查每个input.validity对象的各布尔字段（如.valueMissing、.patternMismatch、.badInput） - 在控制台运行
document.querySelector('input').validity查看实时状态 - Chrome / Edge 中，验证失败的输入框会自动获得
:invalid伪类，可配合 CSS 调试：input:invalid { border-color: #f33; } - 注意：
pattern错误时validity.patternMismatch === true，但若同时为空，validity.valueMissing优先级更高，此时不会报 pattern 错
兼容性与增强控制必须用 JavaScript 补足
原生验证在移动端、旧版 Safari、某些 Android WebView 中行为不一致。关键限制：
- IE10+ 支持
required，但 IE11 不支持pattern的 Unicode 字符类（如\u4e00） - 无法禁用原生气泡提示（
title属性会影响部分提示文案，但不能关闭） - 没有“实时校验”机制 —— 默认只在提交或失去焦点（
blur）时触发，如需输入中实时反馈，必须监听input事件并手动调用checkValidity() - 真正可靠的定制化验证逻辑（比如异步用户名唯一性检查），只能靠
setCustomValidity()+ 手动管理状态
最常被忽略的一点：原生验证只作用于表单提交路径（ 或回车），如果用 JS 调用 form.submit()，它会绕过所有 HTML5 验证 —— 此时必须显式调用 form.checkValidity() 并处理返回值。
