本文详解如何使用原生 javascript（es6）实现多步骤表单中按字段集（fieldset）粒度进行独立验证，避免默认表单提交行为触发全表单校验，并通过设置 `type="button"` 阻止非提交按钮触发验证。
在构建多步骤表单时，一个常见误区是：即使只调用 checkValidity() 验证部分输入元素，整个 。根本原因在于：HTML 中未显式声明 type 的
✅ 正确做法：显式声明按钮类型
只需为所有非提交用途的按钮（如“Continue”、“Go back”）添加 type="button" 属性，即可彻底隔离验证范围：
<!-- 错误：无 type 属性 → 默认为 submit → 触发全表单验证 --> <button onclick="continueToStep(2)">Continue</button> <!-- 正确：显式声明为普通按钮，不提交、不触发验证 --> <button type="button" onclick="continueToStep(2)">Continue</button>
同理，“Go back” 按钮也需添加 type="button"，而最终提交按钮保留 type="submit" 即可。
✅ 验证逻辑优化建议
你当前的 validateFieldset() 函数逻辑正确（筛选 .active fieldset 内的 input 并逐个调用 checkValidity()），但可进一步提升健壮性与可读性：
function validateFieldset() {
const activeFieldset = document.querySelector('fieldset.active');
if (!activeFieldset) return false;
const inputs = activeFieldset.querySelectorAll('input');
return Array.from(inputs).every(input => input.checkValidity());
}- 使用 querySelector('fieldset.active') 替代 querySelectorAll + 过滤，更高效；
- every() 比 find() + 取反语义更清晰，且短路执行（遇到首个无效即返回 false）；
- 无需传参 step，直接依赖 DOM 状态，降低耦合。
⚠️ 注意事项
- 不要移除 required 属性：它是语义化和无障碍访问的基础，仅需控制验证触发时机；
- 手动显示/隐藏错误提示：checkValidity() 仅返回布尔值，若需高亮错误字段或显示 title 提示，可结合 reportValidity()（但注意它会全局触发提示）—— 推荐自行实现 UI 反馈（如添加 .invalid 类）；
- 禁用原生 tooltip？ 若想完全自定义错误提示，可在验证前调用 element.setCustomValidity('') 清除默认消息，再用 JS 控制 UI；
- 表单提交时仍需全量验证：最后的 type="submit" 按钮会自然校验所有 required 字段，符合预期，无需额外干预。
✅ 完整修复后关键代码片段
<form>
<fieldset>
<legend>Your name</legend>
<p>
<label>Prename (required)</label>
<input type="text" id="prename" name="prename" required>
</p>
<p>
<label>Surname (required)</label>
<input type="text" id="surname" name="surname" required>
</p>
<!-- ✅ 关键修复：type="button" -->
<button type="button" onclick="continueToStep(2)">Continue</button>
</fieldset>
<fieldset>
<legend>Your contact information</legend>
<p>
<label>Email (required)</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label>Phone</label>
<input type="tel" id="phone" name="phone">
</p>
<!-- ✅ 同样需 type="button" -->
<button type="button" onclick="goToStep(1)">Go back</button>
<!-- ✅ 提交按钮保持 type="submit" -->
<button type="submit">Submit</button>
</fieldset>
</form>通过这一微小但关键的属性修正，配合清晰的 DOM 状态驱动验证逻辑，即可实现真正按步骤解耦的表单验证体验——专业、轻量、零依赖。
