本文旨在解决%ignore_a_1%表单提交时，在未通过验证的情况下仍然提交的问题。通过修改前端JavaScript验证逻辑，以及引入jQuery/Ajax技术，可以有效阻止未通过验证的表单提交，并提供更好的用户体验，例如无需刷新页面即可显示错误信息。
问题分析
原代码存在的问题是，即使 validate() 函数返回 false，表单仍然会提交到服务器。这是因为 display_error 元素不存在，导致JS报错，进而忽略了return false;语句。
解决方案
以下提供两种解决方案：一种是修改前端 JavaScript 验证逻辑，确保验证失败时阻止表单提交；另一种是使用 jQuery/Ajax 技术，实现异步提交，从而在不刷新页面的情况下显示错误信息。
方案一：修改前端 JavaScript 验证
确保 display_error 元素存在： 在 HTML 代码中添加一个用于显示错误信息的 div 元素，并赋予其 id=”file_error”。
立即学习“前端免费学习笔记（深入）”；
优化 validate() 函数： 确保 validate() 函数正确返回 false，以阻止表单提交。
function validate() { var valid = true; var file_name = ""; var file_type = ""; var file_size = ""; var error_msg = ""; var valid_size = 3 * 1000 * 1000; var display_error = document.getElementById('file_error'); var file = document.getElementById("captureDocument"); // Corrected ID if (file.files.length != 0) { file_name = file.files[0].name; file_size = file.files[0].size; file_type = file.files[0].type; if (file_type != "image/png" && file_type != "image/jpeg" && file_type != "image/gif") { valid = false; error_msg = error_msg + "n* Only 'PNG', 'JPG/JPEG' and 'GIF' file type supported."; } if (file_size > valid_size) { valid = false; error_msg = error_msg + "n* Filesize should be upto 3MB."; } } else { valid = false; error_msg = error_msg + "n* Please select any image file."; } if (valid == true) { alert("File pass all validation. Now it is ready to send."); /*Write ajax code here to send file to the server.*/ return true; } else { display_error.innerHTML = error_msg; return false; }}
注意：
确保 document.getElementById() 中使用的 ID 与 HTML 中的元素 ID 完全一致。确保 validate() 函数在验证失败时，将错误信息显示在 display_error 元素中。return false; 必须在验证失败时执行，才能阻止表单提交。
方案二：使用 jQuery/Ajax 实现异步提交
此方案可以提供更好的用户体验，因为表单提交是异步的，不会刷新页面。
引入 jQuery： 在 HTML 文件中引入 jQuery 库。
编写 jQuery/Ajax 代码： 使用 jQuery 监听表单的 submit 事件，并使用 Ajax 提交表单数据。
$(document).ready(function() { $("form[name='page331']").on("submit", function(e) { e.preventDefault(); // 阻止默认的表单提交行为 var form = $(this); var url = form.attr('action'); var formData = new FormData(this); // Use FormData to handle file uploads var display_error = $('#file_error'); if (!validate()) { return; // 如果验证失败，则不执行 Ajax 请求 } $.ajax({ type: "POST", url: url, data: formData, processData: false, // Important! contentType: false, // Important! cache: false, success: function(data) { // 处理服务器返回的数据 $("#message").html(data); //Display the message from the backend }, error: function(xhr, status, error) { // 处理错误 display_error.html("An error occurred: " + error); } }); });});function validate() { var valid = true; var file_name = ""; var file_type = ""; var file_size = ""; var error_msg = ""; var valid_size = 3 * 1000 * 1000; var display_error = document.getElementById('file_error'); var file = document.getElementById("captureDocument"); // Corrected ID if (file.files.length != 0) { file_name = file.files[0].name; file_size = file.files[0].size; file_type = file.files[0].type; if (file_type != "image/png" && file_type != "image/jpeg" && file_type != "image/gif") { valid = false; error_msg = error_msg + "n* Only 'PNG', 'JPG/JPEG' and 'GIF' file type supported."; } if (file_size > valid_size) { valid = false; error_msg = error_msg + "n* Filesize should be upto 3MB."; } } else { valid = false; error_msg = error_msg + "n* Please select any image file."; } if (valid == true) { alert("File pass all validation. Now it is ready to send."); /*Write ajax code here to send file to the server.*/ return true; } else { display_error.innerHTML = error_msg; return false; }}
注意：
e.preventDefault() 阻止了默认的表单提交行为。FormData 用于处理包含文件上传的表单数据。processData: false 和 contentType: false 是使用 FormData 时必须设置的选项。在 success 回调函数中，可以处理服务器返回的数据，例如显示成功消息。在 error 回调函数中，可以处理错误，例如显示错误信息。验证函数validate() 需要返回true或者false，如果返回false，则ajax不会执行。
总结
通过以上两种方案，可以有效解决前端表单提交时，在未通过验证的情况下仍然提交的问题。方案一修改了前端 JavaScript 验证逻辑，确保验证失败时阻止表单提交。方案二使用 jQuery/Ajax 技术，实现了异步提交，从而在不刷新页面的情况下显示错误信息，提供了更好的用户体验。 建议使用方案二，可以提供更友好的用户体验。 同时，务必在服务器端进行二次验证，确保数据的安全性。
以上就是前端表单验证：防止未通过验证的表单提交的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528199.html
微信扫一扫 
支付宝扫一扫 
