如何实现登录按钮控制功能：输入字段全部填写后才允许登录

你原有代码存在以下几个核心问题，调整后即可实现「仅所有输入字段填写完成后才允许登录」的需求：

• getElementById用法错误，该方法仅支持传入单个id参数，无法通过数组形式访问表单下的子元素
• 密码输入框id为password，原有JS代码用pass取值，无法正确获取密码内容
• 登录按钮点击事件顺序错误，先执行跳转再执行校验，完全起不到拦截作用
• disabled是布尔类型的属性，不是方法也不是字符串，不能用btn.disabled()调用，也不能赋值为字符串"false"
• 没有监听输入框的内容变化，仅点击按钮才校验，无法实时控制按钮可用状态
• HTML结构错误，head标签内不能放置p、img这类可见元素

1. 修改后的HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title style="color: #000000;">The Environmentalists</title>
    <link rel="stylesheet" href="styling.css">
</head>
<body>
    <p>
        <img src="icon.png" alt="站点图标" style="max-width:100%; height:auto; margin:0 auto; display:block;">
    </p>
    <div class="container">
        <h1 class="brand" style="color: #000000;"><span>The Environmentalists</span></h1>
        <div class="container">
        <form id="userLogin">
            <p>
                <label>User</label>
            </p>
            <p>
                <input type="email" name="email" id="email" required>
            </p>
            <p>
                <label>Password</label>
            </p>
            <p>
                <input type="password" name="password" id="password" required>
            </p>
            <p class="full">
                <button type="button" value="signup" style="width:100%">SignUp</button>
                <!-- 初始禁用登录按钮，点击先校验再跳转 -->
                <button type="button" value="Login" style="width:100%" onclick="handleLogin()" id="Login" disabled>Login</button>
            </p>
        </form>
        </div>
    </div>

    <script src="index.js"></script>
</body>
</html>

2. 修改后的JS代码（index.js内容） #

// 获取DOM元素
const emailInput = document.getElementById('email');
const pwdInput = document.getElementById('password');
const loginBtn = document.getElementById('Login');

// 校验输入是否完整的函数
function verifyForm() {
  const emailValid = emailInput.value.trim() !== '';
  const pwdValid = pwdInput.value.trim() !== '';
  // 两个输入都不为空才启用按钮
  loginBtn.disabled = !(emailValid && pwdValid);
}

// 监听两个输入框的输入事件，实时校验
emailInput.addEventListener('input', verifyForm);
pwdInput.addEventListener('input', verifyForm);

// 登录按钮点击事件
function handleLogin() {
  // 点击时再做一次兜底校验，避免异常场景
  if(emailInput.value.trim() === '' || pwdInput.value.trim() === '') {
    return;
  }
  // 校验通过再跳转
  location.href = 'map.html';
}

3. 可选CSS补充 #

可以添加禁用状态的按钮样式，让用户更直观感知按钮不可用状态：

#Login:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

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