本文介绍使用原生 javascript 对多步骤表单进行逐步验证的方法，重点解决文本框、下拉选择、单选组（radio group）的必填校验逻辑，确保用户只有填完当前步骤所有必填项才能进入下一步，同时提供清晰的错误反馈。
在构建多步骤表单时，仅靠 HTML 的 required 属性不足以支撑跨步骤的交互式验证——尤其当涉及单选按钮组（<input type="radio">）时，浏览器默认只检查「是否有任意一个被选中」，但不会自动高亮整个分组或阻止跳转。下面是一套健壮、可复用的纯 JS 验证方案。
✅ 核心思路：按步骤收集并验证必填字段
我们不再遍历所有 <input>, <select>，而是聚焦于 required 属性存在且值为空/未选中的控件，并为每类控件定制验证逻辑：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 文本输入（text, email, number 等）与 <select>：检查 .value.trim() === ''；
- 单选组（type="radio"）：检查同名 name 下是否至少有一个被 checked；
- 复选框（type="checkbox"）：按需处理（本文默认视为可选，跳过验证）；
- 隐藏错误状态：为无效字段添加 .invalid 类，并可配合 CSS 提示（如红色边框、图标）。
✅ 实现代码（完整可运行）
const formContainer = document.getElementById('forms');
const forms = formContainer.querySelectorAll('form');
let currentStep = 0;
// 全局验证函数：返回 true 表示当前表单通过验证
function validateCurrentForm() {
const form = forms[currentStep];
const requiredFields = form.querySelectorAll('[required]');
let isValid = true;
// 清除上一次的 invalid 标记
requiredFields.forEach(el => el.classList.remove('invalid'));
requiredFields.forEach(field => {
const { type, name, value, tagName } = field;
if (tagName === 'SELECT' || (tagName === 'INPUT' && !['radio', 'checkbox'].includes(type))) {
// 普通 input 或 select：检查 value 是否为空
if (!value.trim()) {
field.classList.add('invalid');
isValid = false;
}
} else if (type === 'radio') {
// radio 组：检查同 name 下是否有任一被选中
const radioGroup = form.querySelectorAll(`input[type="radio"][name="${name}"]`);
const isChecked = [...radioGroup].some(r => r.checked);
if (!isChecked) {
// 为整组第一个 radio 添加 invalid（便于 CSS 定位提示）
radioGroup[0].classList.add('invalid');
isValid = false;
}
}
});
return isValid;
}
// 表单提交事件委托（监听整个容器，避免重复绑定）
formContainer.addEventListener('submit', function (e) {
e.preventDefault();
if (!validateCurrentForm()) return; // 验证失败，不继续
const currentForm = forms[currentStep];
const formData = new FormData(currentForm);
const stepData = Object.fromEntries(formData);
console.log(`Step ${currentStep + 1} data:`, stepData);
// 切换到下一步
currentForm.hidden = true;
currentStep++;
if (currentStep >= forms.length) {
console.log('✅ 表单提交完成！最终数据：', Array.from({ length: forms.length }, (_, i) =>
Object.fromEntries(new FormData(forms[i]))
));
// 此处可发起最终 POST 请求，或显示完成页
} else {
forms[currentStep].hidden = false;
}
});✅ HTML 结构建议（语义清晰、利于 JS 选择）
<div id="forms">
<form class="step-form">
<h3>步骤 1</h3>
<input type="text" name="fullName" placeholder="姓名" required>
<select name="country" required>
<option value="">请选择国家</option>
<option value="CN">中国</option>
<option value="US">美国</option>
</select>
<label><input type="radio" name="agree" value="yes" required> 同意条款</label>
<label><input type="radio" name="agree" value="no"> 不同意</label>
<button type="submit">下一步</button>
</form>
<form class="step-form" hidden>
<h3>步骤 2</h3>
<input type="email" name="email" placeholder="邮箱" required>
<input type="tel" name="phone" placeholder="电话">
<button type="submit">下一步</button>
</form>
<form class="step-form" hidden>
<h3>步骤 3</h3>
<textarea name="message" placeholder="留言（可选）"></textarea>
<button type="submit">提交</button>
</form>
</div>⚠️ 注意事项与最佳实践
- 不要依赖 form.checkValidity()：它对 radio 组支持不一致（尤其在未初始化时），手动校验更可控；
-
CSS 增强体验：为 .invalid 添加样式，例如：
.invalid { border-color: #e74c3c; box-shadow: 0 0 4px rgba(231, 76, 60, 0.5); } - 无障碍友好：为无效字段动态添加 aria-invalid="true" 和 aria-describedby 关联错误提示；
- 防重复提交：可在验证通过后禁用提交按钮，或添加加载态；
- 扩展性：如需支持自定义校验规则（如邮箱格式、密码强度），可在 validateCurrentForm() 中为字段添加 data-validate="email" 并扩展判断逻辑。
这套方案完全基于原生 JavaScript，无外部依赖，逻辑清晰、易于调试和维护，适用于各类多步骤表单场景。
