JavaScript 在表单完全验证之前禁用提交按钮

在网页表单中，为了避免用户未填写完整信息而误操作提交，一般需要在前端添加表单验证。为了进一步保证数据传输的正确性，我们还可以在表单完全验证之前禁用提交按钮，防止用户过早提交不完整的表单。

下面是一个使用 JavaScript 实现表单完全验证之前禁用提交按钮的示例代码：

// 获取表单元素和提交按钮元素
const form = document.querySelector('form');
const submitBtn = document.querySelector('input[type="submit"]');

// 定义表单验证函数
function validateForm(event) {
  // 阻止表单默认提交行为
  event.preventDefault();

  // TODO 表单验证逻辑

  // 根据验证结果判断是否禁用提交按钮
  if (validationSuccess) {
    submitBtn.disabled = false; // 验证成功后启用提交按钮
    form.submit(); // 提交表单
  } else {
    submitBtn.disabled = true; // 禁用提交按钮
  }
}

// 绑定表单提交事件
form.addEventListener('submit', validateForm);

在上面的代码中，我们通过 querySelector 方法获取了表单元素和提交按钮元素，并定义了 validateForm 函数来实现表单验证逻辑。在函数中，我们使用了 event.preventDefault() 来阻止表单默认提交行为，根据表单验证结果来判断是否禁用提交按钮，最后根据验证结果来启用或禁用提交按钮并进行表单提交。

需要注意的是，在表单完全验证之前禁用提交按钮会影响用户体验，并可能造成一定的混乱，因此建议在表单验证完全通过后再启用提交按钮。同时，我们也可以为禁用按钮添加一些提示信息来引导用户进行完整的填写。