PHP基础教程（115）PHP调用JavaScript脚本之验证表单元素是否为空：拯救你的表单！当PHP大叔请来JS小弟做空值检查，这对CP我磕了-优快云博客

朋友们，有没有遇到过这种尴尬时刻——你在某个网站填了老半天表单，点击提交后……页面突然刷新，所有内容清空，只飘着一行孤零零的红色小字：“用户名不能为空”。

那一刻是不是想顺着网线爬过去和程序员聊聊人生？

今天咱们就来彻底解决这个世纪难题！我要给你安利一对Web开发界的黄金搭档：PHP大叔和JavaScript小弟的梦幻联动。当他们联手搞表单验证，那效果简直了——丝滑得就像德芙巧克力！

一、为什么我们需要“双打选手”？

先说说为啥要这么大动干戈。表单验证这活儿，理论上单干也行啊。

纯PHP选手的孤独舞台：

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    if (empty($username)) {
        $error = "亲，用户名还没填呢！";
        // 然后…得把用户刚才填的其他数据再塞回表单里，麻烦！
    }
}
?>

发现问题没？页面刷新了！哪怕只错一个字段，所有已填数据都可能归零（除非你手动回填），用户体验直接扣分。

纯JS选手的独舞时刻：

function validateForm() {
    let username = document.getElementById("username").value;
    if (username === "") {
        alert("用户名不能为空！");
        return false; // 阻止提交
    }
    return true;
}

这个体验好多了吧？瞬间提示，不用刷新。但！关掉JavaScript试试？验证直接 bypass，数据裸奔到服务器。而且有些验证（比如用户名是否已注册）必须和数据库打交道，JS可搞不定。

所以啊，最佳方案浮出水面：让JS打前锋，做即时友好的轻量级验证（客户端验证）；PHP做后卫，进行最终的安全检查和数据校验（服务器端验证）。这才是专业组合拳！

二、这对CP是怎么“勾搭”上的？

核心奥秘其实很简单：PHP是服务器端语言，它运行、生成HTML页面（包含JS代码），然后把这个完整的页面送给用户的浏览器。浏览器接收到后，才渲染页面并执行其中的JavaScript。

所以流程是这样的：

你请求表单页面 → PHP在服务器运行，生成一个内含JS验证代码的HTML页面 → 浏览器拿到页面，显示表单 → 你点提交 → JS先跑起来检查 → 如果JS检查通过，数据才被发送给服务器 → PHP再次进行终极检查

看起来有点绕？咱们画个简陋的关系图：

[用户浏览器] <--(带JS的HTML页面)-- [PHP服务器]
       |                               ^
       | (填写表单，JS先验)             |
       | (提交，数据发回)              |
       `------------------------------>`

PHP像是总导演，提前把JS小弟的剧本（代码）写好，送到用户浏览器那里。等用户互动时，JS小弟就按剧本开始表演。

三、手把手打造你们的专属“验证CP”

理论说再多不如撸代码！下面我们搞一个用户注册表单的完整示例，包含用户名、邮箱、密码三项的“非空检查”。

第一步：构建HTML骨架（form.html.php）

我们把PHP和HTML写在一起，这样PHP能动态处理一些事情。

<?php
// 先预设变量，防止报错
$username = $email = '';
$username_err = $email_err = $password_err = '';

// 如果表单已经提交过一次（但PHP验证失败），我们需要保留用户之前填的值
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = trim($_POST["username"] ?? '');
    $email = trim($_POST[