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