HTML4无原生表单验证，需JS手动实现；HTML5通过required、type、pattern等属性实现声明式验证，但仅提交时触发且不可靠，必须后端二次校验。
HTML4 没有原生表单验证能力
HTML4 的 <form> 完全依赖 JavaScript 手动校验，比如监听 onsubmit、正则匹配 input.value、弹 alert() 提示——既重复造轮子，又容易漏掉焦点离开（blur）、粘贴（paste）等触发场景。更麻烦的是，不同浏览器对 document.forms[0].elements 的兼容写法还不一致。
HTML5 表单验证靠属性驱动，但默认只在提交时触发
HTML5 引入了声明式验证属性，比如：
-
required：非空检查（空字符串、未选中都算无效） -
type="email"或type="url"：自动格式校验（注意：它只检查基本结构，不发请求验证邮箱真实存在） -
min/max（用于 number/date）和pattern（支持正则，但必须全匹配，隐含^...$） -
novalidate放在<form>上可关闭整表单的原生验证
⚠️ 关键限制：浏览器只在用户点击提交按钮（或调用 form.submit()）时才触发验证提示；不会在输入过程中实时反馈，也不会阻止 form.submit() 调用（除非你手动 event.preventDefault()）。
验证是否“靠谱”？取决于你对“靠谱”的定义
HTML5 原生验证优点是轻量、统一 UI（各浏览器用自己 tooltip 或高亮）、零 JS 即可启用；但它不是安全机制，所有验证都可被绕过（禁用 JS、改 DOM、直接 POST 请求）。所以：
立即学习“前端免费学习笔记（深入）”；
- ✅ 适合做「用户体验层」的即时反馈，降低用户错误提交次数
- ❌ 绝不能替代后端校验，服务端必须重新验证所有字段
- ⚠️
pattern正则不支持标志（如i、g），且部分浏览器对 Unicode 支持弱（比如中文手机号校验要慎用） - ? 若需实时校验，得配合
input/blur事件 +checkValidity()和setCustomValidity()
一个最小可用的 HTML5 验证示例
<form> <input type="email" required placeholder="请输入邮箱"> <input type="password" minlength="6" required> <input type="submit" value="注册"> </form>
这段代码在 Chrome/Firefox/Safari 中点提交时，会自动阻止并高亮错误字段。但如果你用 JS 写 document.querySelector('form').submit()，它依然会提交——因为原生验证不拦截 JS 调用。真要拦截，得这么写：
form.addEventListener('submit', e => {
if (!form.checkValidity()) {
e.preventDefault();
}
});
真正容易被忽略的一点：HTML5 验证消息样式几乎无法用 CSS 精确控制（::-webkit-validation-bubble 等伪元素已废弃），定制化提示必须用 setCustomValidity() + 自己的 DOM 提示框。
