前端表单验证是Web开发中至关重要的一环。它不仅能提升用户体验，避免用户提交无效数据，还能减轻服务器压力，确保数据的有效性和安全性。本文将介绍如何使用JavaScript进行前端验证，并在验证失败时阻止表单提交，以及如何利用Ajax实现无刷新提交。
前端验证：onsubmit事件的正确使用
原问题中，表单的onsubmit事件绑定了一个validate()函数，期望在验证失败时阻止表单提交。然而，即使验证失败，表单仍然提交到了collect-dsrs-attendance-confirmation.php。这是因为validate()函数中存在逻辑问题，导致返回值不正确。
问题分析：
原代码中的validate()函数存在几个问题：
立即学习“前端免费学习笔记（深入）”；
var file = document.getElementById(“user_img”); 获取的是 元素，但后续的错误信息显示区域display_error，代码中并没有定义。JavaScript中，函数如果没有明确的return语句，默认返回undefined。return valid;写在else语句块外面，导致无论验证结果如何，都会执行该语句，影响了验证结果。错误信息没有正确显示，因为没有找到id为file_error的元素。
解决方案：
以下是修改后的validate()函数，并添加了错误信息显示区域：
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("user_img"); 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; } }<!--DSR Information Fields
-->+880<input class="form-control" id="dsrELNumber" type="text" name="el_number" id="elNumber" placeholder="Enter EL Number" data-maxlength="10" data-minlength="10" oninput="this.value=this.value.slice(0,this.dataset.maxlength)" value="" required><!---->
关键点：
错误信息显示区域： 在HTML中添加
，用于显示错误信息。正确的return语句： 确保return true;和return false;在正确的条件分支中执行。
使用Ajax进行无刷新提交
虽然前端验证可以阻止大部分无效提交，但仍然可以通过绕过前端验证的方式提交数据。因此，结合后端验证是最佳实践。此外，使用Ajax可以实现无刷新提交，提升用户体验。
示例代码：
首先，移除表单的onsubmit事件，并添加一个按钮的点击事件监听器：
... ...
然后，使用jQuery编写Ajax代码：
$(document).ready(function() { $("#btnTakeDocument").click(function(e) { e.preventDefault(); // 阻止默认的表单提交 if (!validate()) { return; // 如果验证失败，则不提交 } var formData = new FormData($('form[name="page331"]')[0]); // 使用FormData对象处理文件上传 $.ajax({ type: "POST", url: "./collect-dsrs-attendance-confirmation.php", data: formData, contentType: false, // 必须设置为false processData: false, // 必须设置为false success: function(response) { // 处理服务器返回的响应 $("#message").html(response); // 将响应显示在id为message的div中 alert("提交成功！"); }, error: function(xhr, status, error) { // 处理错误 alert("提交失败：" + error); } }); });});
关键点：
e.preventDefault();： 阻止默认的表单提交行为。FormData对象： 用于处理包含文件上传的表单数据。contentType: false和processData: false： 在使用FormData对象时，必须设置这两个选项为false。错误处理： 添加error回调函数，处理Ajax请求失败的情况。jQuery引入: 确保页面引入了jQuery库。
后端验证：
在collect-dsrs-attendance-confirmation.php中，务必进行后端验证，确保数据的有效性和安全性。例如：
3 * 1024 * 1024) { echo "图片大小不能超过 3MB！"; exit; } // 将文件移动到指定目录 $upload_dir = "uploads/"; $target_file = $upload_dir . basename($file_name); if (move_uploaded_file($file_tmp_name, $target_file)) { echo "文件上传成功！"; } else { echo "文件上传失败！"; }}?>
总结：
通过结合前端验证和Ajax提交，可以有效防止无效数据提交，提升用户体验，并减轻服务器压力。前端验证可以快速反馈错误，而Ajax提交可以实现无刷新体验。同时，务必进行后端验证，确保数据的有效性和安全性。
以上就是前端表单验证与Ajax提交：防止无效数据提交的实用指南的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528000.html
微信扫一扫 
支付宝扫一扫 
