前端表单验证与防止提交：JavaScript 和 PHP 协同实践-js教程-PHP中文网

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

DDD

发布： 2025-10-09 08:34:32

原创

409人浏览过

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

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

前端 JavaScript 验证与阻止提交

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

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

<form action="./collect-dsrs-attendance-confirmation.php" method="POST" name="page331" enctype="multipart/form-data" onsubmit="return validate();">
    <input type="file" id="user_img" name="user_img" accept="image/*" required>
    <button type="submit">Submit</button>
    <div id="file_error"></div>
</form>

<script>
function validate() {
    var fileInput = document.getElementById('user_img');
    var file = fileInput.files[0];
    var errorDiv = document.getElementById('file_error');
    var errorMsg = "";
    var valid = true;

    if (!file) {
        errorMsg = "请选择一个图像文件。";
        valid = false;
    } else {
        var fileSize = file.size; // bytes
        var fileType = file.type;

        if (fileType !== "image/png" && fileType !== "image/jpeg" && fileType !== "image/gif") {
            errorMsg += "\n* 仅支持 PNG, JPG/JPEG 和 GIF 文件类型。";
            valid = false;
        }

        if (fileSize > 3 * 1024 * 1024) { // 3MB
            errorMsg += "\n* 文件大小应小于 3MB。";
            valid = false;
        }
    }

    if (!valid) {
        errorDiv.innerHTML = errorMsg;
        return false; // 阻止表单提交
    } else {
        errorDiv.innerHTML = ""; // 清空错误信息
        return true; // 允许表单提交
    }
}
</script>

登录后复制

代码解释：

pollinations

属于你的个性化媒体引擎

231

查看详情

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

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

注意事项：

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

PHP 后端验证与重定向

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

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 获取并清理数据
    $el_number = htmlspecialchars($_POST["el_number"]);
    $user_img = $_FILES["user_img"];

    // 服务器端验证
    $errors = [];

    if (empty($el_number)) {
        $errors[] = "EL号码不能为空。";
    }

    if ($user_img["error"] == UPLOAD_ERR_NO_FILE) {
        $errors[] = "请选择一个图像文件。";
    } else {
        $file_name = $user_img["name"];
        $file_size = $user_img["size"];
        $file_type = $user_img["type"];
        $file_tmp_name = $user_img["tmp_name"];

        if ($file_type !== "image/png" && $file_type !== "image/jpeg" && $file_type !== "image/gif") {
            $errors[] = "仅支持 PNG, JPG/JPEG 和 GIF 文件类型。";
        }

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

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

登录后复制

代码解释：

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

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

改进方案：

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

<?php
session_start(); // 启动 session

if (!empty($errors)) {
    $_SESSION['errors'] = $errors; // 将错误信息存储到 session
    header("Location: index.php");
    exit();
}
?>

登录后复制

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

<?php
session_start();
if (isset($_SESSION['errors'])) {
    $errors = $_SESSION['errors'];
    unset($_SESSION['errors']); // 清除 session 中的错误信息
    echo "<div class='error'>";
    foreach ($errors as $error) {
        echo $error . "<br>";
    }
    echo "</div>";
}
?>

登录后复制