如何实现登录表单输入框为空时禁用提交按钮

问题说明 #

现有登录表单需要实现输入字段为空时自动禁用提交按钮的交互，当前存在问题：输入框为空时提交按钮仍可正常触发提交。

• 登录页面效果展示
• 空输入可提交问题演示

原有表单代码 #

<div class="login-form">
  <form action="/login" method="POST">
    <h1>Login</h1>
    <!-- input fields start from here -->
    <div class="content">
      <div class="input-field">
        <input type="email" id="email" placeholder="Email" autocomplete="nope" name="email">
      </div>
      <div class="input-field">
        <input type="password" id="password" placeholder="Password" autocomplete="new-password" name="password">
      </div>    
<!-- Action links -->
      <a href="#" class="link">Forgot Your Password?</a>
      <br>
      <a href="register" class="link">Create an Account</a>
    </div>
<!-- submit buttons -->
    <div class="action">
      <button type="submit" >Sign in</button>
    </div>
  </form>
</div>

实现方案 #

核心逻辑：

1. 初始状态给提交按钮加上disabled属性，默认不可点击
2. 监听邮箱、密码两个输入框的输入事件，每次输入内容变化时，校验两个输入框去掉首尾空格后是否都有有效值
3. 两个字段都非空时移除按钮的disabled属性允许提交，否则保持禁用状态

修改后完整代码 #

<div class="login-form">
  <form action="/login" method="POST">
    <h1>Login</h1>
    <!-- input fields start from here -->
    <div class="content">
      <div class="input-field">
        <input type="email" id="email" placeholder="Email" autocomplete="nope" name="email">
      </div>
      <div class="input-field">
        <input type="password" id="password" placeholder="Password" autocomplete="new-password" name="password">
      </div>    
<!-- Action links -->
      <a href="#" class="link">Forgot Your Password?</a>
      <br>
      <a href="register" class="link">Create an Account</a>
    </div>
<!-- submit buttons -->
    <div class="action">
      <!-- 初始默认禁用按钮 -->
      <button type="submit" id="submitBtn" disabled>Sign in</button>
    </div>
  </form>
</div>

<script>
// 获取DOM元素
const emailInput = document.getElementById('email');
const pwdInput = document.getElementById('password');
const submitBtn = document.getElementById('submitBtn');

// 校验表单状态
function checkFormValid() {
  // 去掉输入值首尾空格，避免全空格内容绕过校验
  const emailValid = emailInput.value.trim() !== '';
  const pwdValid = pwdInput.value.trim() !== '';
  // 两个字段都有效时启用按钮，否则禁用
  submitBtn.disabled = !(emailValid && pwdValid);
}

// 给输入框绑定输入事件监听
emailInput.addEventListener('input', checkFormValid);
pwdInput.addEventListener('input', checkFormValid);
</script>

可选优化 #

• 如需增加邮箱格式校验，可以替换emailValid的判断逻辑，增加正则匹配：

  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value.trim())
  

• 可以给禁用状态的按钮加对应CSS样式，优化交互提示：

  button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  

注意：前端按钮禁用只是体验层面的优化，后端接口侧依然需要做参数非空、合法性校验，不能仅依赖前端校验作为安全防线。

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