原生HTML表单校验默认仅在submit时触发，且对空格、零宽字符、JS赋值无感；需手动介入验证生命周期，如用input/blur事件结合checkValidity()和reportValidity()实现即时反馈。
原生 HTML 表单校验不是加了 required 就自动“实时报错”，它默认只在 submit 时触发，且对空格、零宽字符、JS 赋值等完全无感——想真正控住体验，必须手动介入验证生命周期。
为什么填了内容还提示“请填写此字段”
浏览器判断“空”的逻辑非常朴素：input.value.trim() === ""，但很多情况肉眼难辨：
- 用户只敲了空格、Tab 或粘贴进零宽字符（
u200B），.trim()清不掉 -
<select></select>的首项写成<option value="">请选择</option>，value为空就直接触发required拒绝 - 用 JS 直接赋值如
input.value = " "，不会触发校验，也不会变:invalid
实操建议：开发时在控制台执行 document.querySelector('input').value 看原始值，比盯着页面猜更准；对关键字段，可在 input 事件里主动调用 setCustomValidity("") 清状态，再做自定义判断。
pattern 正则总匹配失败？锚点和类型限制是关键
pattern 只对 type="text"、"email"、"tel"、"password" 等生效，对 type="number" 或 "date" 完全无效。而且它默认是全字符串匹配，但很多人漏掉语义严谨性：
立即学习“前端免费学习笔记（深入）”；
- 写
pattern="[0-9]{11}"允许"abc12345678901def"通过——必须写成pattern="^1[3-9][0-9]{9}$" -
pattern不校验空值，空值由required控，两者要共存才完整 - 别用
d，部分旧安卓 WebView 解析异常；改用[0-9]或[d]（双反斜杠转义） - 中文匹配慎用
u4E00-u9FA5，推荐[\u4e00-\u9fa5]（小写十六进制，无反斜杠）
顺手加 title="请输入11位手机号"，能让错误提示更友好，且不依赖 JS。
怎么让验证在离开字段时就反馈，而不是等提交
原生行为只在 submit 时触发，想实现 blur 或 input 实时校验，必须调用 DOM 方法：
-
checkValidity()返回布尔值，不显示提示，适合做逻辑判断 -
reportValidity()才会弹出浏览器默认气泡，但注意：Firefox不滚动到错误字段，Chrome会 - 推荐组合：
input事件中清空自定义错误 +blur时调用reportValidity()
示例：
const phoneInput = document.getElementById('phone');
phoneInput.addEventListener('input', () => {
phoneInput.setCustomValidity('');
});
phoneInput.addEventListener('blur', () => {
if (!phoneInput.checkValidity()) {
phoneInput.reportValidity();
}
});
novalidate 和 formnovalidate 的作用边界在哪
novalidate 仅作用于 <form> 元素，它会禁用整个表单的原生校验（包括所有子字段的 required、pattern 等）；而 formnovalidate 是按钮级属性，只影响点击该按钮时的提交行为。
- 给
<button type="submit" formnovalidate>加这个属性，点击它就不会触发任何校验，适合“暂存草稿”类按钮 -
novalidate常用于需要完全接管校验流程的场景（比如统一走 JS 校验 + 后端接口预检） - 二者都不影响后端校验逻辑，也不阻止 JS 手动调用
checkValidity()
容易被忽略的一点：一旦用了 novalidate，:valid/:invalid CSS 伪类也会失效，视觉反馈得全靠 JS 控制 class。
