原生html校验存在诸多陷阱：submit才触发、粘贴/js赋值不响应、type="email"校验宽松、pattern在type="number"上失效、锚点缺失致匹配不严、novalidate须加在form上、setcustomvalidity需手动清空等。
原生 HTML 标签属性能实现基础校验，但“智能”二字的关键在于：它只在 submit 时触发、对粘贴/JS 赋值不响应、type="email" 校验极宽松、pattern 在 type="number" 上完全失效——想靠属性一劳永逸，反而埋下体验和逻辑漏洞。
为什么 type="email" 和 pattern 总是“看似有效实则放水”
浏览器对 type="email" 的校验只要求含一个 @ 和一个点号（比如 a@b.c 就算通过），根本不管域名层级或本地部分合法性。而 pattern 若没加锚点，pattern="[0-9]{4}" 会让 abc1234def 也过关；必须写成 pattern="^[0-9]{4}$" 才严格匹配。
-
pattern只对type="text"、"email"、"tel"等生效，对type="number"完全忽略 - 想校验邮箱格式，应改用
type="text" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"并配title -
type="number"允许粘贴字母，显示为空但checkValidity()仍返回true，必须配合min/max或 JS 补判
required 和 minlength 等属性的触发时机陷阱
这些属性默认只在表单提交时才校验，用户输入、粘贴、JS 修改值后不会自动重验。也就是说，你用 input.value = "test" 赋值，哪怕该字段有 required，也不会标记为无效状态。
- 原生验证不是响应式机制，它不监听 DOM 值变化
- 若需实时反馈（比如输入时就标红），必须手动监听
input或blur事件 - 监听后要调用
element.checkValidity()判断状态，或element.reportValidity()弹出气泡提示（注意 Firefox 不自动滚动） - 整个表单实时校验，要用
form.reportValidity()，它会遍历所有带约束的子元素
novalidate 属性加错位置等于没关
novalidate 是 form 级开关，不是按钮或输入框的属性。加错位置浏览器直接忽略。
- 正确写法：
<form novalidate></form> - 错误写法：
<button novalidate></button>或<input novalidate> - 加了
novalidate后，required、pattern、type等全部失效，你得 100% 自己用 JS 补全空值、格式、异步查重等全部逻辑 - 低端安卓 WebView 中，原生气泡可能卡顿，这时禁用反而是合理选择，但别忘了补上视觉反馈和提交拦截
setCustomValidity 的清空逻辑常被忽略
调用 element.setCustomValidity("错误信息") 设置错误后，这个状态会一直保留，直到你显式调用 setCustomValidity("") 清空。否则哪怕用户已输对，reportValidity() 仍会弹出旧错误。
- 每次输入后都得先清空上次错误：
input.setCustomValidity("") - 再根据当前值判断是否设新错误：
input.setCustomValidity("手机号格式错误") - 若用
checkValidity()判断状态，它只返回布尔值，不触发 UI 提示；要提示必须用reportValidity() -
validationMessage属性可读取当前错误文案，适合自定义提示区域渲染
真正“智能”的校验增强，不在于堆砌多少 HTML 属性，而在于清楚每条属性的生效边界、触发条件和失效场景——尤其是那些不报错但逻辑已偏移的静默状态，最容易在测试后期暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
