引言：加载状态按钮与表单验证的挑战
在现代Web应用中，为了提升用户体验，我们常常会在用户点击提交按钮后，立即显示一个加载动画（Loading Spinner）并禁用按钮，以表明数据正在处理中。这避免了用户重复点击，并提供了即时反馈。然而，这种看似简单的优化，如果实现不当，可能会意外地绕过浏览器内置的HTML5表单验证机制，例如 required 属性，导致用户可以提交包含空必填字段的表单。
误区分析：为何点击事件会绕过验证？
问题的根源在于事件监听的选择。当开发者选择监听提交按钮的 click 事件，并在该事件处理函数中直接禁用按钮、显示加载动画，并立即通过JavaScript代码触发表单提交（例如 $("#save").submit()）时，就会出现验证绕过。
考虑以下常见的错误实现示例：
<form method="post" action="" id="save"> <input class="input" name="passwort" type="password" placeholder="Enter your password here" required> <button type="submit" class="btn btn-lg btn-primary" id="load"> Save </button> </form>
$(document).ready(function() {
$("#load").click(function() {
// 禁用按钮并添加加载动画
$(this).prop("disabled", true);
$(this).html(
`<i class="spinner-border spinner-border-sm mb-1"></i> Loading`
);
// 立即提交表单，这会绕过HTML5验证
$("#save").submit();
});
});在这个示例中，当用户点击 id="load" 的按钮时，click 事件立即触发。JavaScript代码会禁用按钮并添加加载动画，然后强制执行 $("#save").submit()。此时，浏览器没有机会在表单真正提交前执行其内置的HTML5验证逻辑。因此，即使 passwort 输入框具有 required 属性且为空，表单也会被提交。
立即学习“前端免费学习笔记（深入）”；
解决方案：监听表单的 submit 事件
解决此问题的关键在于理解HTML5表单验证的触发时机。浏览器会在表单的 submit 事件被触发 之前 自动执行所有内置的HTML5验证（如 required、pattern、type 等）。只有当所有验证规则都通过后，submit 事件才会被真正触发。
因此，正确的做法是监听 表单 的 submit 事件，而不是按钮的 click 事件。这样可以确保在执行禁用按钮和显示加载动画的操作之前，HTML5验证已经完成。
以下是修正后的实现示例：
首先，确保你的页面中已引入jQuery库，例如：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
然后，修改HTML结构（与之前相同，因为问题出在JavaScript逻辑）：
<form method="post" action="" id="save"> <input class="input" name="passwort" type="password" placeholder="Enter your password here" required> <button type="submit" class="btn btn-lg btn-primary" id="load"> Save </button> </form>
最后，将JavaScript代码调整为监听表单的 submit 事件：
$(document).ready(function() {
// 监听表单的submit事件
$("#save").submit(function(e) {
// 当此事件触发时，表示HTML5验证已通过
// 此时，禁用按钮并添加加载动画
$('#load').prop("disabled", true);
$('#load').html(
`<i class="spinner-border spinner-border-sm mb-1"></i> Loading`
);
// 表单将继续正常提交（页面刷新或通过action属性定义的行为）
});
});在这个修正后的代码中：
- 用户点击 Save 按钮。
- 浏览器首先检查表单中的所有HTML5验证规则（例如 passwort 字段是否已填写）。
- 如果存在任何未通过验证的字段，浏览器会显示相应的提示信息，并且 submit 事件不会被触发。
- 只有当所有字段都通过HTML5验证后，表单的 submit 事件才会被触发。
- 此时，我们的JavaScript代码会执行，禁用按钮并显示加载动画。
- 由于没有阻止默认行为（例如 e.preventDefault()），表单将继续其默认的提交流程（通常是向 action 属性指定的URL发送请求并刷新页面）。
通过这种方式，我们确保了HTML5表单验证机制得以充分发挥作用，同时仍然能够为用户提供友好的加载状态反馈。
注意事项与最佳实践
用户体验优先级： 始终将用户体验放在首位。在表单验证通过后立即显示加载状态，可以有效避免用户在等待期间的困惑或重复操作。
服务端验证不可或缺： 客户端HTML5验证是提升用户体验的第一道防线，但绝不能替代服务端的严格验证。恶意用户可以轻易绕过客户端验证，因此所有关键业务逻辑和数据完整性验证都必须在服务端进行。
-
AJAX提交的考虑： 如果你的表单是通过AJAX进行异步提交，你需要在 submit 事件处理函数中调用 e.preventDefault() 来阻止表单的默认提交行为，然后手动发起AJAX请求。在AJAX请求成功或失败后，务必记得重新启用按钮并移除加载动画。
$("#save").submit(function(e) { e.preventDefault(); // 阻止表单默认提交行为 $('#load').prop("disabled", true); $('#load').html(`<i class="spinner-border spinner-border-sm mb-1"></i> Loading`); // 模拟AJAX请求 $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: $(this).serialize(), success: function(response) { // 处理成功响应 console.log("提交成功:", response); }, error: function(xhr, status, error) { // 处理错误 console.error("提交失败:", error); }, complete: function() { // 请求完成后，无论成功失败，都恢复按钮状态 $('#load').prop("disabled", false); $('#load').html("Save"); // 恢复原始文本 } }); }); 加载状态的清除： 无论表单是正常提交导致页面跳转，还是通过AJAX异步提交，都应确保加载状态能够被正确清除，按钮恢复可用。对于页面跳转，浏览器会自动重置状态；对于AJAX，如上例所示，需要在 complete 回调中处理。
总结
正确处理HTML5表单验证与加载状态提交按钮的集成，是提升Web应用健壮性和用户体验的关键一环。通过将事件监听从按钮的 click 事件转移到表单的 submit 事件，我们能够充分利用浏览器内置的验证机制，确保数据在发送到服务器之前符合预设的客户端规则。这种方法不仅代码简洁，而且符合Web标准的最佳实践，值得在开发中广泛采用。
