本文旨在解决 javascript 表单验证 与jquery ajax提交功能分离导致 ajax 请求绕过验证的问题。我们将详细介绍如何将原生 javascript 验证逻辑无缝整合到jquery 的表单提交 事件 中，通过阻止默认表单行为并在验证成功后才执行 ajax 请求，从而确保数据提交的准确性和一致性。
背景与问题分析
在 Web 开发中，表单提交通常涉及客户端验证和数据提交两个阶段。当使用原生javaScript 的 onsubmit 事件进行验证，同时又使用 jQuery 的 submit 事件处理 AJAX 提交时，可能会遇到一个常见问题：即使原生验证失败，jQuery 的 AJAX 提交逻辑仍然可能被执行。
其根本原因在于，原生 onsubmit 事件和 jQuery 的 submit 事件是两个独立的事件监听器。当表单被提交时，如果原生 onsubmit 返回 false，它会阻止 浏览器 的默认表单提交行为（即页面刷新）。然而，jQuery 的 submit 事件 处理器 可能会在原生事件处理之前或之后触发，并且其内部的 AJAX 逻辑并不直接受原生验证结果的约束。如果 jQuery 的事件 处理器 没有显式地阻止默认行为或检查验证结果，AJAX 请求将照常发送，导致未经验证的数据被提交。
我们的目标是确保 AJAX 提交操作仅在所有客户端验证（例如，检查单选按钮是否被选中）成功通过后才能执行，从而保证数据的完整性和业务逻辑的正确性。
核心解决方案
解决此问题的关键在于将所有表单提交相关的逻辑统一到一个事件处理器中，并明确控制表单的默认提交行为。具体步骤如下：
立即学习“Java 免费学习笔记（深入）”；
- 移除冗余的原生 onsubmit 绑定：不再使用 document.getElementById(“Filter”).onsubmit = validateForm; 这样的原生绑定，以避免事件冲突和逻辑分散。
- 整合验证与提交逻辑：将所有的客户端验证逻辑以及 AJAX 提交逻辑都放置在 jQuery 的 submit 事件处理器内部。
- 阻止默认表单提交 ：在 jQuery 的 submit 事件处理器内部，使用 e.preventDefault() 方法来阻止表单的默认提交行为（即阻止页面刷新）。
- 条件性执行 AJAX：在 e.preventDefault()之后，首先调用验证函数。如果验证函数返回 false（表示验证失败），则立即停止执行后续代码（包括 AJAX 请求）；只有当验证函数返回 true（表示验证成功）时，才继续执行 AJAX 请求。
示例代码与实现
下面我们将通过一个具体的例子来演示如何实现这一解决方案。假设我们有一个包含单选按钮的表单，要求用户必须选择一个选项才能提交。
html结构
首先，定义一个简单的 HTML 表单，其中包含两个单选按钮、一个用于显示错误信息的 <span> 元素以及一个提交按钮。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="/submit-data" method="POST" id="filter"> <label class="toggler-wrapper style-19"> <input type="radio" name="select" value="1" /> <div class="toggler-slider"><div class="toggler-knob"></div></div> </label> <div class="my"><strong> 选项 1 </strong></div> <label class="toggler-wrapper style-19"> <input type="radio" name="select" value="2" /> <div class="toggler-slider"><div class="toggler-knob"></div></div> </label> <div class="my"><strong> 选项 2 </strong></div> <br /> <span id="Error_select" class="error" style="color: red;"></span> <div class="buttonfiltra" id="buttonfiltra"> <button type="submit" id="link-ida"> 提交筛选 </button> <input type="hidden" value="valuefilter" class="submit" id="link-id" name="action" /> </div> </form> <div id="response" style="margin-top: 20px; border: 1px solid #ccc; padding: 10px;"> <!-- AJAX 响应将显示在这里 --> </div>javascript/jQuery 逻辑
接下来是核心的 JavaScript 和 jQuery 代码，它包含了验证逻辑和整合后的 AJAX 提交逻辑。
// 验证单选按钮是否选中 function validateConsumo() { // 使用 querySelectorAll 更精确地选择所有名为 'select' 的单选按钮 var selectRadios = document.getElementById("filter").querySelectorAll('input[name="select"]'); var errorSpan = document.getElementById("error_select"); var isChecked = false; errorSpan.innerHTML = ""; // 清除之前的错误信息 for (var i = 0; i < selectRadios.length; i += 1) {if (selectRadios[i].checked) {isChecked = true; break;} } if (!isChecked) {errorSpan.innerHTML = "* 请选择一个值 "; // 显示错误信息 return false;} return true; } // 主验证函数（如果需要集成更多验证规则，可以在这里调用其他验证函数）function validateForm() { // 当前只验证单选按钮，如果还有其他字段，可以像下面这样组合验证结果 // var isValidField1 = validateField1(); // var isValidField2 = validateField2(); // return isValidField1 && isValidField2 && validateConsumo(); return validateConsumo();} // jQuery 表单提交事件处理器 $(document).ready(function() {// 重要：确保没有其他原生 onsubmit 绑定会干扰这里的逻辑 // 例如，移除或注释掉类似 'document.getElementById("filter").onsubmit = validateForm;' 的代码 $("#filter").on("submit", function (e) {e.preventDefault(); // 阻止表单的默认提交行为，这是关键！// 执行验证 if (!validateForm()) {console.log(" 验证失败，AJAX 提交已阻止。"); // 验证失败时，错误信息已在 validateConsumo 函数中显示 return; // 如果验证失败，则停止后续操作 } // 验证成功后，执行 AJAX 请求 console.log(" 验证成功，执行 AJAX 提交。"); var filterForm = $(this); // 获取当前提交的表单 $.ajax({url: filterForm.attr('action'), // 从表单的 action 属性获取 URL data: filterForm.serialize(), // 序列化表单数据 type: filterForm.attr('method'), // 从表单的 method 属性获取请求类型 (POST/GET) beforeSend: function(xhr) {filterForm.find('button').text('提交中……'); // 提交前改变按钮文本，提供用户反馈 }, success: function(data) {filterForm.find('button').text('提交筛选'); // 恢复按钮文本 $('#response').html(data); // 将 AJAX 响应插入到指定元素 console.log("AJAX 请求成功，响应数据已更新。"); // 可以在此处添加成功后的其他逻辑，例如清空表单或显示成功消息 }, error: function(jqXHR, textStatus, errorThrown) {filterForm.find('button').text('提交筛选'); // 恢复按钮文本 console.error("AJAX 请求失败： " + textStatus, errorThrown); // 可以在此处显示错误消息给用户，例如：$('#error_select').html(" 提交失败，请重试。"); } }); }); });关键点解析
- e.preventDefault()：这是阻止 浏览器 默认表单提交行为的核心。如果没有这一行，表单会在验证通过后（或甚至在验证失败后，取决于事件链）尝试进行传统的页面跳转或刷新，而不是执行 AJAX 请求。
- validateForm()的调用时机 ：验证函数必须在 e.preventDefault() 之后、AJAX 请求之前被调用。这样可以确保在数据发送到服务器之前，所有客户端验证规则都已满足。
- 条件性执行 AJAX 请求 ：if (!validateForm()) {return;} 这一逻辑判断至关重要。它确保了只有当 validateForm()返回 true 时（即所有验证通过），AJAX 请求才会被触发。如果验证失败，return 语句会立即终止当前事件处理器的执行，从而阻止 AJAX 请求。
- 错误信息显示：在 validateConsumo 函数中，通过 errorSpan.innerHTML = “* 请选择一个值 ”; 及时向用户显示验证失败的原因，提升用户体验。
注意事项与最佳实践
- 单一事件源：避免在同一个表单上混用原生 onsubmit 和 jQuery 的 submit 事件处理器。选择一种方式，并将其作为表单提交逻辑的唯一入口。通常，使用 jQuery 的 $(selector).on(‘submit’, function(e) {…}); 是更推荐的方式，因为它提供了更强大的事件管理能力和跨浏览器兼容性。
- 用户体验：
- 即时反馈：在验证失败时，及时、清晰地显示错误信息。
- 按钮状态：在 AJAX 请求发送期间，改变提交按钮的文本（例如，“提交中 …”）或禁用按钮，以防止用户重复提交，并在请求完成后恢复。
- 响应提示：AJAX 请求成功或失败后，向用户提供相应的提示信息。
- 可维护性 ：将复杂的验证逻辑 封装 在独立的函数中（如 validateConsumo()），可以提高代码的可读性、可重用性和可维护性。
- 服务器端验证：客户端验证是提高用户体验和减轻服务器压力的第一道防线，但绝不能取代服务器端验证。恶意用户可以绕过客户端验证，因此所有提交到服务器的数据都必须在服务器端进行严格验证。
- 错误处理 ：在 AJAX 请求中添加 error 回调函数，以便在请求失败时能够优雅地处理错误，并向用户提供有用的反馈。
总结
通过将 JavaScript 表单验证逻辑与 jQuery 的 AJAX 提交事件处理器紧密集成，并利用 e.preventDefault()和条件性执行 AJAX 请求，我们能够有效地解决 AJAX 请求绕过客户端验证的问题。这种方法确保了表单数据在发送到服务器之前满足所有客户端验证规则，从而提高了数据的完整性、系统的健壮性以及用户体验。遵循这些最佳实践，可以构建出更加可靠和用户友好的 Web 表单。
