如何实现必填字段填完前按钮禁用，解决多步表单按钮状态异常问题

现有代码的核心问题 #

• 校验逻辑残缺：原checkForm仅校验了第一个输入项first，完全没覆盖步骤内的其他必填字段，本身就不符合“所有必填字段填完才解锁按钮”的规则
• 触发机制缺失：原checkForm没有绑定任何自动触发事件，只有手动调用才会生效，既没有在输入内容变化时实时校验，也没有在步骤回退时触发校验，导致从步骤2返回步骤1时，按钮会沿用之前最后一次设置的禁用状态，完全不符合预期
• 状态隔离不足：两个步骤的输入项重复绑定同一个响应式变量，不同步骤的按钮状态没有和对应步骤的字段做强绑定，容易出现跨步骤的状态污染

落地实现步骤 #

• 按步骤拆分字段和对应按钮：给每个步骤的输入、提交按钮做明确的归属划分，步骤1的按钮只绑定步骤1的字段，步骤2的按钮只绑定步骤2的字段，杜绝跨步骤的状态污染
• 补全通用校验逻辑：编写可复用的校验函数，接收当前步骤的字段集合、对应要控制的按钮DOM，逐一遍历所有必填字段，只要有一个字段为空，就将按钮设为禁用状态，匹配灰色样式；所有字段填完则切换为可用状态，替换为指定配色
• 补全校验触发时机：
  • 所有输入框绑定input事件，输入内容变化时实时触发当前步骤的校验，更新按钮状态
  • 给上一步按钮绑定点击事件，触发步骤回退时，立刻对回到的目标步骤做全量字段校验，重新计算按钮的禁用状态和样式，不沿用之前的旧状态
  • 页面初始化时先执行一次全量校验，保证按钮初始状态符合规则

修正后的参考代码 #

结构部分：

<form>
  <!-- 步骤1区域 -->
  <div data-step="1">
    <input id='first' type='text' v-model='step1Fields.first' required />
    <input id='second' type='text' v-model='step1Fields.second' required />
    <input id='third' type='text' v-model='step1Fields.third' required />
    <button id="step1NextBtn">Next</button>
  </div>

  <!-- 步骤2区域 -->
  <div data-step="2">
    <input id='first1' type='text' v-model='step2Fields.first' required />
    <input id='second2' type='text' v-model='step2Fields.second' required />
    <input id='third3' type='text' v-model='step2Fields.third' required />
    <button id="prevBtn">previous</button>
    <button id="step2NextBtn">Next</button>
  </div>
</form>

逻辑部分：

// 按步骤独立存储字段值，避免跨步骤数据互相干扰
const step1Fields = { first: '', second: '', third: '' };
const step2Fields = { first: '', second: '', third: '' };

/**
 * 通用校验函数
 * @param {Object} fields 当前步骤的所有必填字段集合
 * @param {HTMLElement} targetBtn 当前步骤要控制的提交按钮DOM
 */
function validateStep(fields, targetBtn) {
  // 校验规则：所有字段去除首尾空格后非空，才算满足提交条件
  const isAllFilled = Object.values(fields).every(val => val.trim().length > 0);
  
  // 更新按钮禁用状态
  targetBtn.disabled = !isAllFilled;
  
  // 按状态匹配对应样式
  if (isAllFilled) {
    // 可用状态：自定义高亮配色
    targetBtn.style.backgroundColor = '#1677ff';
    targetBtn.style.color = '#ffffff';
  } else {
    // 禁用状态：灰色样式
    targetBtn.style.backgroundColor = '#d9d9d9';
    targetBtn.style.color = 'rgba(0, 0, 0, 0.25)';
  }
}

// 绑定上一步按钮点击事件：回退到步骤1时重新执行全量校验
document.getElementById('prevBtn').addEventListener('click', () => {
  const step1Btn = document.getElementById('step1NextBtn');
  validateStep(step1Fields, step1Btn);
});

// 给步骤1的所有输入框绑定实时校验
document.querySelectorAll('[data-step="1"] input').forEach(input => {
  input.addEventListener('input', (e) => {
    // 同步更新字段值
    const fieldKey = e.target.id;
    step1Fields[fieldKey] = e.target.value;
    // 触发校验
    validateStep(step1Fields, document.getElementById('step1NextBtn'));
  })
});

// 给步骤2的所有输入框绑定实时校验
document.querySelectorAll('[data-step="2"] input').forEach(input => {
  input.addEventListener('input', (e) => {
    // 同步更新字段值
    const fieldKey = e.target.id.replace(/[0-9]/g, '');
    step2Fields[fieldKey] = e.target.value;
    // 触发校验
    validateStep(step2Fields, document.getElementById('step2NextBtn'));
  })
});

// 页面初始化时先执行一次全量校验，保证初始状态正确
validateStep(step1Fields, document.getElementById('step1NextBtn'));
validateStep(step2Fields, document.getElementById('step2NextBtn'));

内容的提问来源于stack exchange，提问作者Shaik Salima