HTML5原生表单验证需同时满足type、required、pattern等语义组合，且仅在type="submit"按钮提交或回车时触发；hidden元素、未透传属性、错误正则写法（如\d{11}）及未重置setCustomValidity均会导致失效。
HTML5 原生表单验证不是“开了就能用”，而是需要同时满足 type、required、pattern 等属性的语义组合，且浏览器默认行为容易被 CSS 或 JS 干扰导致失效。
为什么 required 加了却没提示？
常见原因是表单提交时未触发验证时机：只有用户点击 <button type="submit"> 或按回车（在可提交表单内）才会触发；用 button 且没设 type，或用 onclick 调用 form.submit() 都会绕过验证。
-
type="submit"是硬性要求，<button>默认是type="button"，不触发验证 - JS 中调用
form.submit()不触发原生验证，应改用form.requestSubmit() - 若元素被
display: none或visibility: hidden隐藏，即使有required也不会校验 - 部分自定义组件（如封装的
<input>）若未透传原生属性，required实际未生效
pattern 正则为什么总匹配失败？
pattern 的正则默认是“全字符串匹配”，不加 ^ 和 $ 也等效于包裹了，但容易因忽略空格、换行或 Unicode 字符导致误判。它只对 text、search、url、tel、email、password 等类型生效，对 number 或 date 无效。
- 手机号校验别写
pattern="\d{11}"，应写pattern="^1[3-9]\d{9}$"（更准），并配合title="请输入11位手机号"显示提示 -
pattern不校验空值 —— 空值由required控制，两者要共存 - 正则中不要用
\u4E00-\u9FA5匹配中文，部分浏览器解析异常；改用[\u4e00-\u9fa5]（无反斜杠转义）或直接用 Unicode 属性（不推荐兼容性差）
如何让错误提示更友好、不打断操作流？
浏览器默认用 alert-式弹层（Chrome）或 tooltip（Firefox），无法样式化。想控制提示位置和内容，必须监听 invalid 事件 + 调用 setCustomValidity()，但要注意重置逻辑。
立即学习“前端免费学习笔记（深入）”；
- 首次触发
invalid后，setCustomValidity("xxx")设定错误消息；但用户输入后需手动清空：input.setCustomValidity("")，否则后续验证始终失败 - 推荐在
input或blur时做即时校验，而非只依赖提交时的invalid - 用
:valid/:invalid伪类可控制样式，但注意：未交互过的required字段初始为:valid，直到失去焦点或提交才变:invalid
<form id="myForm">
<input type="text" name="phone" required pattern="^1[3-9]\d{9}$" title="请输入有效的手机号">
<button type="submit">提交</button>
</form>
<script>
const phone = document.querySelector('input[name="phone"]');
phone.addEventListener('input', () => {
if (phone.validity.patternMismatch) {
phone.setCustomValidity('手机号格式不正确');
} else {
phone.setCustomValidity('');
}
});
</script>
真正难的不是写对属性，而是理解验证状态的生命周期：从初始空值、用户输入、失焦、提交，每个环节触发的 validity 属性不同，validity.valid、validity.valueMissing、validity.patternMismatch 等互斥又叠加，调试时最好直接打印 input.validity 对象看实时状态。
