原生表单验证已生效，但需注意type="email"校验严格（须含@及域名点）、minlength在textarea中兼容性差、button需显式设type属性，且验证失败时不自动聚焦错误字段。
required、type="email"、minlength 这些属性开箱即用，但不加 novalidate 时浏览器会默认拦截提交并显示原生提示——这常被误以为“验证没生效”，其实是它已经生效了。
为什么填了邮箱还报“请填写有效的电子邮件地址”
浏览器对 type="email" 的校验非常严格：它要求必须含 @ 符号且后面至少有一个点（如 user@domain.com），user@domain 或 user@@domain.com 都会失败。空格、中文字符、全角符号也会触发校验失败。
- 测试时别用
test@163这类缺域名后缀的值 - 移动端键盘可能自动补全
.com，但桌面端不会，要手动补全 - 若需宽松校验（比如允许企业内网邮箱
user@intranet），改用type="text"+pattern更可控
minlength 和 maxlength 对不同控件的行为差异
minlength 在 <input> 上有效，但在 <textarea></textarea> 上部分老版本 Safari 会忽略；maxlength 则两者都支持，且会直接截断输入（用户无法输超长内容）。
-
<input type="text" minlength="6">：提交时校验，不阻止输入，只在提交前报错 -
<textarea maxlength="200"></textarea>：用户打到第201个字符时，光标停住，内容不录入 - 若需限制
<textarea></textarea>最小长度又兼顾兼容性，得靠 JavaScript 监听input事件 +checkValidity()
点击提交按钮没反应？检查 button 类型
常见错误是写了 <button>提交</button> 却没设 type 属性。在 <form></form> 内，无 type 的 button 默认为 submit，但某些框架或重置样式会覆盖其行为；更稳妥的是显式声明：
- 提交用：
<button type="submit">提交</button> - 纯操作（如清空表单）用：
<button type="button">重置</button> - 千万别写
<input type="button">来替代button，语义和可访问性差很多
原生验证真正容易被忽略的点是：它只在校验失败时阻断提交，但不会主动标记错误字段——用户可能只看到顶部红字提示，却找不到哪个框出问题。加 :invalid CSS 伪类或监听 invalid 事件做聚焦，才是完整闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
