前端表单验证与防止提交：JavaScript 和 PHP 协同实践

本文旨在提供一个完整的教程，介绍如何使用 JavaScript 进行前端表单验证，并在验证失败时阻止表单提交，同时提供 PHP 后端验证和重定向的解决方案，以确保数据安全性和用户体验。重点讲解如何利用 JavaScript 的 onsubmit 事件和 return false 来阻止表单提交，以及如何使用 PHP 的 header() 函数进行页面重定向。

前端 JavaScript 验证与阻止提交

在 HTML 表单中，onsubmit 事件允许我们在表单提交之前执行 JavaScript 代码。通过在 onsubmit 事件处理函数中返回 false，我们可以阻止表单的默认提交行为。

以下是一个示例，演示如何验证图像文件类型和大小，并在验证失败时阻止表单提交：

    
    Submit
    

代码解释：

剪映专业版

一款全能易用的桌面端剪辑软件

下载

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

1. HTML 结构： 包含一个文件上传输入框 user_img 和一个提交按钮。onsubmit="return validate();" 确保在表单提交时调用 validate() 函数。
2. validate() 函数：
   • 获取文件输入框和错误信息显示区域的引用。
   • 检查是否选择了文件。
   • 获取文件大小和类型。
   • 进行文件类型和大小的验证。
   • 如果验证失败，设置错误信息并返回 false，阻止表单提交。
   • 如果验证成功，清空错误信息并返回 true，允许表单提交。
3. 错误信息显示： 错误信息显示在 file_error div 中。

注意事项：

• 始终进行服务器端验证，因为前端验证可以被绕过。
• 提供清晰的错误信息，帮助用户更正错误。

PHP 后端验证与重定向

即使前端进行了验证，也必须在服务器端进行验证，以确保数据的完整性和安全性。如果服务器端验证失败，可以使用 header() 函数将用户重定向回表单页面。

 3 * 1024 * 1024) {
            $errors[] = "文件大小应小于 3MB。";
        }
    }

    // 如果有错误，重定向回表单页面并传递错误信息
    if (!empty($errors)) {
        $error_string = implode("
", $errors); // 将错误信息连接成字符串
        // 使用 URL 参数传递错误信息 (不推荐，有安全风险，仅作演示)
        header("Location: index.php?error=" . urlencode($error_string));
        exit();
    } else {
        // 处理上传的文件和数据
        // ...
        echo "数据已成功处理！";
    }
}
?>

代码解释：

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

1. $_SERVER["REQUEST_METHOD"] == "POST"： 检查是否是 POST 请求。
2. htmlspecialchars()： 用于防止 XSS 攻击，对用户输入进行转义。
3. 服务器端验证： 对 el_number 和 user_img 进行验证。
4. header("Location: ...")： 如果验证失败，使用 header() 函数将用户重定向回 index.php 页面，并通过 URL 参数 error 传递错误信息。
5. urlencode()： 对错误信息进行 URL 编码，确保在 URL 中正确传递。
6. exit()： 在重定向后立即终止脚本执行。

改进方案：

• Session 存储错误信息： 不要使用 URL 参数传递错误信息，这可能会暴露敏感信息。使用 Session 存储错误信息更安全。

  然后在 index.php 页面中，从 Session 中获取并显示错误信息：

  ";
      foreach ($errors as $error) {
          echo $error . "
  ";
      }
      echo "