如何在HTML内置正则验证失败时禁用提交按钮？

核心实现思路 #

• 实时监听所有带pattern属性的输入元素，每次输入或失焦时检查验证状态
• 复用HTML5原生的checkValidity()方法，完全依赖input标签上的pattern规则，JS里不写正则
• 根据整体验证结果控制提交按钮的禁用状态，只有所有输入都通过验证才启用按钮
• 监听表单的提交事件做兜底验证，防止绕过前端禁用逻辑的情况

完整代码实现 #

HTML 代码

<!DOCTYPE html>
<html>
<body>
<form id="myForm">
  <input type="text" pattern="[A-Za-z]{3}" name="codeA" id="codeA" title="Three letter country code" required><br><br>
  <input type="text" pattern="[A-Za-z]{2}" name="codeB" id="codeB" title="Two letter country code" required><br><br>
  <input type="submit" id="submit" disabled>
</form>
</body>
</html>

JavaScript 代码

// 获取表单、所有带pattern的输入元素、提交按钮
const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input[pattern]');
const submitBtn = document.getElementById('submit');

// 验证所有输入元素的通用函数
function validateAllInputs() {
  let allValid = true;
  inputs.forEach(input => {
    // 触发原生验证，同时会显示title里的提示
    if (!input.checkValidity()) {
      allValid = false;
      // 手动触发错误提示（可选）
      input.reportValidity();
    }
  });
  // 更新按钮禁用状态
  submitBtn.disabled = !allValid;
  return allValid;
}

// 给每个输入元素绑定实时验证事件
inputs.forEach(input => {
  input.addEventListener('input', validateAllInputs);
  input.addEventListener('blur', validateAllInputs);
});

// 监听表单提交事件，做最后兜底验证
form.addEventListener('submit', function(e) {
  if (!validateAllInputs()) {
    e.preventDefault(); // 阻止表单提交
    console.log('输入验证未通过，无法提交');
  } else {
    console.log('btn clicked.'); // 原有的点击逻辑移到这里
    // 这里可以添加表单提交的后续逻辑
  }
});

关键说明 #

1. checkValidity() 方法：HTML5原生验证方法，自动根据input的pattern、required等属性验证输入内容，返回布尔值，完美符合“JS不写正则”的要求
2. 实时状态更新：通过input和blur事件监听用户输入，按钮状态随输入内容实时变化，提升用户体验
3. 按钮初始禁用：页面加载时按钮默认禁用，避免用户未输入任何内容时直接提交
4. 表单提交兜底：即使用户通过控制台手动启用按钮，表单提交时的验证逻辑也会拦截不符合规则的提交

原代码问题分析 #

原代码仅监听了提交按钮的点击事件，既没有检查输入的验证状态，也没有控制按钮的禁用状态，所以不管输入是否符合pattern规则，点击事件都会触发。通过上面的改造，既能实现“验证失败时禁用按钮”的需求，又完全复用了HTML上的正则规则，保证方案的通用性。

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