HTML5原生表单校验在IE8及以下浏览器中不可用，需分层兼容：特性检测降级输入类型、手动绑定JS校验逻辑、Modernizr按需加载验证器、JS控制class实现视觉反馈、submit事件拦截并全局校验兜底。
HTML5 原生表单校验在老旧浏览器（尤其是 IE8 及以下）中基本不可用——required、pattern、type="email" 等属性被忽略，checkValidity() 方法不存在，:valid/:invalid 伪类完全不解析。真正可行的兼容策略不是“强行补全所有 API”，而是分层应对：先保障功能可用，再叠加体验增强。
识别不支持环境，主动降级输入类型
不要依赖 UA 判断，用特性检测更可靠：
- 对
date、time、email等类型，运行document.createElement('input').type = 'date'，若返回值不是"date"，就立即设为type="text" - 降级后需手动绑定格式校验逻辑，例如
date改为text后，用正则/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/验证，并在blur或submit时触发 - 避免依赖
input.checkValidity()的返回值——它对type="text"不做任何日期/邮箱逻辑检查
用 Modernizr 检测能力，按需加载 JS 校验逻辑
Modernizr 能准确告诉你浏览器是否支持某项 HTML5 表单特性，而不是猜版本号：
- 引入
modernizr.js后，可判断Modernizr.input.required、Modernizr.input.pattern是否为false - 若不支持，就启用一套轻量 JS 校验器：监听
submit事件，遍历所有字段，按required属性、pattern值、min/max等手动比对 - 错误提示统一插入到对应
旁的中，不依赖浏览器原生气泡
样式反馈不能靠伪类，改用 JS 控制 class
IE8 及以下连 :focus 都不支持，更别说 :valid。必须放弃 CSS 伪类驱动的视觉反馈：
- 给每个输入框绑定
blur和input（或keyup）事件，在回调中调用自定义验证函数 - 验证通过时加
class="valid"，失败时加class="invalid"，CSS 写成input.valid和input.invalid - 必填字段可统一加
class="required"，配合星号图标或浅色底纹，不依赖:required伪类
表单提交拦截 + 全局校验兜底
老旧浏览器不会自动阻止非法表单提交，必须用 JS 完全接管：
- 给
绑定submit事件，第一时间e.preventDefault() - 执行完整校验流程：逐字段检查空值、格式、范围；收集全部错误信息
- 聚焦第一个出错字段，滚动到可视区域，并高亮其父容器（如 ）
- 校验全部通过后，再用
form.submit()触发原生提交（不走 AJAX，保持后端兼容） - 校验全部通过后，再用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
