如何在邮箱输入为空时禁用多步骤登录表单的Next按钮？

你的代码存在几处关键问题导致功能失效，以下是修正后的完整代码及修改说明：

const pageBox = document.querySelector('.page-box');
const btnNext = document.querySelector('.btn-next');
const btnBack = document.querySelector('.btn-back');
const checkboxPass = document.querySelector('.checkbox-pass');
const passwordInput = document.querySelector('.password');
const loginTitle = document.querySelector('.loginTitle-text');
const userEmail = document.querySelector('.user-email');
const emailInput = document.querySelector('.email');

// 封装按钮状态切换逻辑
function toggleNextButton() {
  // 去除首尾空格后判断长度，避免空格误判为有效内容
  btnNext.disabled = emailInput.value.trim().length === 0;
}

// 页面加载时初始化按钮状态
toggleNextButton();

btnNext.onclick = (e) => {
    e.preventDefault();
    pageBox.classList.add('active-pass');
    setTimeout(() => passwordInput.focus(), 500);
    loginTitle.innerHTML = 'Welcome';
    userEmail.innerHTML = emailInput.value;
};

btnBack.onclick = (e) =>{
    e.preventDefault();
    pageBox.classList.remove('active-pass');
    loginTitle.innerHTML = 'Sign in';
    userEmail.innerHTML = 'Please continue,';
    emailInput.focus();
};

checkboxPass.onclick = () => {
    // 简化密码显示/隐藏逻辑
    passwordInput.type = checkboxPass.checked ? 'text' : 'password';
};

// 监听输入框的输入事件，实时更新按钮状态
emailInput.addEventListener('input', toggleNextButton);

核心修改点： #

1. 修正事件监听类型：原代码使用了不存在的btnNext事件，改为监听输入框的input事件，用户输入、删除内容时都会触发状态更新
2. 修复按钮状态赋值错误：
   • 移除错误的btnNext.disabled()调用（disabled是DOM元素属性，不是方法）
   • 将字符串'true'/'false'改为布尔值true/false，这是disabled属性的正确赋值类型
3. 添加初始化逻辑：页面加载时直接执行一次状态判断，确保初始状态下邮箱为空时按钮处于禁用状态
4. 优化内容判断逻辑：使用trim()去除输入内容的首尾空格，避免用户输入空格被误判为有效内容

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