如何使用JavaScript实现表单验证后加载器（Loader）的显示？

当然可以实现，核心思路是利用浏览器原生的表单验证机制，只有当所有必填字段都填写正确时，才触发加载状态。具体修改步骤如下：

1. 修改HTML代码 #

把按钮上的onclick属性去掉，我们要通过表单的提交事件来控制加载状态：

<form id="form">
  <input type="text" required>
  <button type="submit" class="button">
    <span class="button__text">Save</span>
  </button>
</form>

2. 添加JavaScript代码 #

给表单绑定submit事件监听器——这个事件只有在浏览器原生验证通过（所有必填字段都已填写）后才会触发，此时再给按钮添加加载类：

const form = document.getElementById('form');
const submitButton = form.querySelector('.button');

form.addEventListener('submit', function() {
  // 激活加载状态
  submitButton.classList.add('button--loading');
  // 禁用按钮防止重复提交（可选但推荐）
  submitButton.disabled = true;
});

补充说明 #

• 浏览器原生的required验证会自动拦截未填写必填字段的提交操作，此时submit事件根本不会触发，加载状态自然不会被激活，完全符合你的需求。
• 加上submitButton.disabled = true是为了避免用户在加载过程中重复点击提交按钮，防止重复提交表单。
• 你的CSS代码不需要任何修改，保持原样即可。

内容的提问来源于stack exchange，提问作者Kārlis