JavaScript实现根据密码长度启用/禁用按钮的代码问题排查

代码无法生效有3个直接原因：

• 属性拼写错误：读取输入值长度时误将length写为lenght，JS无法识别该属性会返回undefined，和数值15做比较时逻辑完全失效
• 未绑定触发事件：仅定义了校验函数，但没有将函数绑定到密码输入框的输入事件上，用户输入内容时不会触发校验逻辑
• 未设置初始状态：页面首次加载时按钮没有默认禁用，未输入内容时也能点击提交

调整HTML（初始给按钮加禁用属性） #

<form class="form" id="form1" method="POST" action="submit.php" accept-charset="UTF-8" autocomplete="off">
   <input type="password" placeholder="Password" id="passfield">
   <button type="submit" id="form-submit" disabled>CONNECT</button>
</form>

修正并补全JS逻辑 #

// 修正拼写错误的校验函数
function toggleSubmitBtn() {
  const passField = document.getElementById("passfield");
  const submitBtn = document.getElementById("form-submit");
  
  if (passField.value.length < 15) {
    submitBtn.setAttribute("disabled", "");
  } else {
    submitBtn.removeAttribute("disabled");
  }
}

// 页面DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const passField = document.getElementById("passfield");
  // 监听输入事件，输入/删除内容时实时校验
  passField.addEventListener('input', toggleSubmitBtn);
  // 初始化执行一次校验，兼容浏览器自动填充等场景
  toggleSubmitBtn();
})

修复后完全匹配需求：密码长度不足15位时提交按钮始终为禁用状态，长度达标后自动启用，删除内容导致长度回落至15位以下时会自动重新禁用，不需要额外添加用户名输入框相关逻辑。

内容的提问来源于stack exchange，提问作者Santiago Cuartas Rmrz