JavaScript 中表单事件怎么在多步骤表单中按步骤拦截并校验当前页输入-js教程-PHP中文网

多步骤表单应在“下一步”点击时仅校验当前步骤字段：1. 用data-step或class标识步骤容器；2. “下一步”用type="button"并监听点击；3. validatestep()收集当前步骤可交互字段，执行原生+自定义校验；4. 校验通过后切换active类实现步骤跳转。

javascript 中表单事件怎么在多步骤表单中按步骤拦截并校验当前页输入

在多步骤表单中，不能依赖全局的 submit 事件一次性校验全部字段，而应在用户点击“下一步”时，只校验当前步骤的字段是否合法。核心思路是：**把“下一步”按钮当作自定义提交触发点，手动收集当前页表单项、执行校验逻辑、阻止跳转（若失败）**。

1. 给每步容器标记唯一步骤标识

便于定位当前页的输入项。推荐用 data-step 属性或 class 区分：

<div id="step-1" class="step active" data-step="1">
  <input name="username" required><input name="email" type="email" required>
</div>
<div id="step-2" class="step" data-step="2">
  <input name="phone" pattern="\d{11}"><select name="city"><option value="">请选择</option></select>
</div>

2. “下一步”按钮绑定点击事件，不使用 type="submit"

避免触发表单默认提交行为。用普通 button 或带 type="button" 的按钮：

<button type="button" id="next-btn">下一步</button>

JS 中监听点击，并获取当前激活步骤：

OpenJDK 24

OpenJDK 24 Windows x64 官方参考实现（24+36），适合 Windows 环境进行 Java 开发、编译、运行和版本兼容性验证。

下载

document.getElementById('next-btn').addEventListener('click', () => {
  const currentStep = document.querySelector('.step.active');
  if (!currentStep) return;

  if (validateStep(currentStep)) {
    goToNextStep();
  }
});

3. 按步骤校验：收集 + 遍历 + 判断

validateStep(el) 函数负责校验传入的步骤容器内所有必填/规则字段：

用 el.querySelectorAll('input, select, textarea') 获取所有可交互控件
跳过 type="hidden" 和 disabled 元素
对每个字段检查：required 属性、value 是否为空、checkValidity()（原生校验）、或自定义规则（如手机号正则）
任一字段失败，就聚焦第一个错误项、添加错误样式、返回 false

function validateStep(stepEl) {
  const fields = stepEl.querySelectorAll('input:not([type="hidden"]):not(:disabled), select:not(:disabled), textarea:not(:disabled)');
  let isValid = true;

  fields.forEach(field => {
    // 原生校验（支持 required / pattern / type="email" 等）
    if (!field.checkValidity()) {
      highlightError(field);
      if (isValid) field.focus(); // 只聚焦第一个错的
      isValid = false;
    }
    // 自定义补充校验（例如确认密码一致性）
    else if (field.name === 'password_confirm') {
      const pwd = document.querySelector('input[name="password"]');
      if (field.value !== pwd?.value) {
        highlightError(field);
        field.setCustomValidity('两次输入的密码不一致');
        if (isValid) field.focus();
        isValid = false;
      }
    }
  });

  return isValid;
}

function highlightError(el) {
  el.classList.add('error');
  el.nextElementSibling?.classList.remove('hidden'); // 显示提示文字
}