在H5多步骤表单中实现每步独立原生校验，关键是隔离验证范围与正确触发时机：导航按钮须设type="button"防误提交，每步动态控制required属性，仅对当前步字段调用checkValidity()并利用validity API精准反馈。
在 H5 多步骤表单中实现每一步独立的原生校验，关键不是“禁用原生校验”，而是**隔离验证范围 + 正确触发时机**。浏览器的 required、pattern 等属性本身是有效的，但默认会作用于整个 <form>。只要不让非提交按钮触发表单提交行为，并只对当前步骤的字段做有效性检查，就能安全复用 HTML5 原生能力。
给所有导航按钮显式加 type="button"
这是最容易被忽略却最关键的一环。任何“上一步”“下一步”按钮，只要不负责最终提交，就必须声明 type="button"：
- 错误写法：
<button onclick="nextStep()">下一步</button>→ 默认为type="submit"，点击即触发表单全局验证 - 正确写法：
<button type="button" onclick="nextStep()">下一步</button>→ 完全不触发提交或内置校验 - 最终提交按钮保留
type="submit"即可，它才该承担表单级校验责任
每步用独立容器包裹，并动态控制 required 属性
不要让所有字段一开始就带 required。原生校验依赖属性存在与否，所以需配合 JS 动态开关：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把每步内容放在单独的
<div class="step">或<fieldset>中 - 切换步骤时，遍历当前步内所有
input、select、textarea，统一设required=""；同时移除其他步内元素的required属性 - 对单选组（
type="radio"），只需给同名name下任一选项设required（通常设第一个），浏览器就能识别整组为必填
验证当前步时，只调用目标字段的 checkValidity()
不要调用 form.checkValidity() —— 它会检查全部字段。应聚焦当前步 DOM 节点：
- 获取当前步骤容器：
const currentStep = document.querySelector('.step.active') - 查出其中所有需校验的字段：
const fields = currentStep.querySelectorAll('input[required], select[required], textarea[required]') - 逐个调用
field.checkValidity()，任一返回false就中断流程，并可调用field.reportValidity()显示原生提示 - 全部通过再执行步骤切换
利用 validity API 做轻量反馈，不重写样式逻辑
原生 validity 对象已包含丰富状态（valueMissing、typeMismatch、patternMismatch 等），可直接读取：
- 输入框为空 →
field.validity.valueMissing === true - 邮箱格式错 →
field.validity.typeMismatch === true - 正则不匹配 →
field.validity.patternMismatch === true - 无需自己写正则或判断逻辑，直接用这些布尔值做条件分支即可
- 如需自定义提示，用
field.setCustomValidity('提示文字')，再调reportValidity()触发显示
