表单验证后禁用提交按钮 - Html

在表单提交时，为了避免用户提交无效的数据，我们需要进行表单验证。当表单验证通过后，我们还需要禁用提交按钮，防止用户多次点击提交按钮。

表单验证

在 Html 中，表单验证可以通过 required 属性、正则表达式等方式进行。以下是一个简单的例子：

<form>
  <label for="username">用户名：</label>
  <input id="username" type="text" required>
  <br>
  <button type="submit">提交</button>
</form>

在上述例子中，为输入框添加了 required 属性，表示该输入框为必填项。当用户不填写该项时，表单验证会失败。

禁用提交按钮

当表单验证通过后，为了防止用户多次点击提交按钮，我们需要将提交按钮禁用。可以通过 Javascript 实现：

<form>
  <label for="username">用户名：</label>
  <input id="username" type="text" required>
  <br>
  <button id="submit-btn" type="submit">提交</button>
</form>
<script>
  var form = document.querySelector('form');
  var submitBtn = document.querySelector('#submit-btn');
  form.addEventListener('submit', function(event) {
    event.preventDefault();  // 阻止表单默认提交行为
    submitBtn.disabled = true;  // 禁用提交按钮
    // 其他表单提交代码...
  });
</script>

在上述例子中，为提交按钮添加了 id 属性，方便通过 querySelector 方法获取到该元素。在表单提交事件中，通过 disabled 属性禁用提交按钮。

总结

通过表单验证和禁用提交按钮，可以确保用户输入的数据符合要求，同时防止用户多次提交相同的数据。

以上就是关于表单验证后禁用提交按钮的介绍。