前端表单验证：防止未通过验证的表单提交

本文旨在解决前端表单提交时，在未通过验证的情况下仍然提交的问题。通过修改前端JavaScript验证逻辑，以及引入jQuery/Ajax技术，可以有效阻止未通过验证的表单提交，并提供更好的用户体验，例如无需刷新页面即可显示错误信息。

问题分析

原代码存在的问题是，即使 validate() 函数返回 false，表单仍然会提交到服务器。这是因为 display_error 元素不存在，导致JS报错，进而忽略了return false;语句。

解决方案

以下提供两种解决方案：一种是修改前端 JavaScript 验证逻辑，确保验证失败时阻止表单提交；另一种是使用 jQuery/Ajax 技术，实现异步提交，从而在不刷新页面的情况下显示错误信息。

方案一：修改前端 JavaScript 验证

1. 确保 display_error 元素存在： 在 HTML 代码中添加一个用于显示错误信息的 div 元素，并赋予其 id="file_error"。

   立即学习“前端免费学习笔记（深入）”；

   <div id="docImage">
       <label class="custom-file-label text-primary mt-3" for="file-input">Take Selfie</label>
       <input type="file" class="mt-4 form-control" id="captureDocument" name="user_img" accept="image/*" capture="camera" required>
       <div id="file_error" style="color: red;"></div> <!-- 添加错误信息显示区域 -->
       <button class="btn text-white mt-4 mb-4 d-block ps-4 pe-4" type="submit" style="background-color: rgb(255, 0, 0);" id="btnTakeDocument">Submit</button>
   </div>

   登录后复制

2. 优化 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;
       }
   }

   登录后复制

   注意：

   

   表单大师AI

   一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

   74

   查看详情
   • 确保 document.getElementById() 中使用的 ID 与 HTML 中的元素 ID 完全一致。
   • 确保 validate() 函数在验证失败时，将错误信息显示在 display_error 元素中。
   • return false; 必须在验证失败时执行，才能阻止表单提交。

方案二：使用 jQuery/Ajax 实现异步提交

此方案可以提供更好的用户体验，因为表单提交是异步的，不会刷新页面。

1. 引入 jQuery： 在 HTML 文件中引入 jQuery 库。

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

   登录后复制

2. 编写 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 技术，实现了异步提交，从而在不刷新页面的情况下显示错误信息，提供了更好的用户体验。 建议使用方案二，可以提供更友好的用户体验。 同时，务必在服务器端进行二次验证，确保数据的安全性。

以上就是前端表单验证：防止未通过验证的表单提交的详细内容，更多请关注php中文网其它相关文章！