如何使用HTML和原生JS实现必填项未填完时禁用提交按钮

以下是满足两个需求的完整可运行代码，同时修正了原代码中alert多参数仅生效第一个的问题：

调整后HTML代码 #

<form action='index.html' id="form-user">
  <input type="text" name="username" id="username" placeholder="username" required>
  <input type="email" name="email" id="email" placeholder="email" required>
  <input type="password" name="password" id="password" placeholder="password" required>
  <button type="submit" name="submit" id='button-send' disabled>SUBMIT</button>
</form>

调整后JS代码 #

// 提前获取需要复用的DOM元素，避免重复查询
const userForm = document.getElementById('form-user')
const submitBtn = document.getElementById('button-send')
const requiredInputs = document.querySelectorAll('#form-user input[required]')

// 表单必填项校验逻辑，可根据需求扩展校验规则
const validateForm = () => {
  let allValid = true
  requiredInputs.forEach(input => {
    const value = input.value.trim()
    // 基础非空校验
    if (!value) {
      allValid = false
      return
    }
    // 可选：补充邮箱格式校验
    if (input.type === 'email' && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
      allValid = false
    }
  })
  // 动态切换提交按钮禁用状态
  submitBtn.disabled = !allValid
}

// 为所有必填输入框绑定输入事件，实时校验表单
requiredInputs.forEach(input => {
  input.addEventListener('input', validateForm)
})

// 绑定表单提交事件监听器，替代原内联onsubmit写法
userForm.addEventListener('submit', (e) => {
  // 不需要表单默认跳转提交行为可保留此行，否则删除
  e.preventDefault()
  // 业务逻辑部分
  const username = document.getElementById('username').value.trim()
  const password = document.getElementById('password').value.trim()
  const email = document.getElementById('email').value.trim()
  alert(`用户名：${username}\n密码：${password}\n邮箱：${email}`)
})

功能说明 #

• 未完成必填项禁用提交按钮
  • 初始状态给提交按钮添加disabled属性，默认不可点击
  • 所有必填输入框绑定input事件，用户每输入内容就触发一次校验
  • 校验规则可自定义扩展，除基础非空、邮箱格式校验外，还可补充密码长度、特殊字符校验等规则，全部符合要求后自动解除按钮禁用
• 表单提交事件绑定
  • 移除了HTML内联的onsubmit写法，改用addEventListener绑定提交事件，代码耦合度更低、可维护性更强
  • 提交事件回调中可自由扩展业务逻辑，比如新增参数校验、发起接口请求等操作

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