如何在表单提交前用 JavaScript 验证必填字段并跳转到结果页

在PHP表单开发中，一个很常见的需求是：前端实时校验用户输入，防止空提交，只有验证通过后才将数据POST到另一个页面渲染结果。很多初学者容易在这里踩坑——试图在HTML页面中用PHP动态生成Ja vaScript脚本，并用echo输出window.alert，结果导致JS语法错误。正确的做法其实很简单：将表单验证完全前置到客户端，用Ja vaScript在用户点击提交时检查字段，仅当全部非空时才允许提交。无需依赖PHP在页面加载时输出JS代码。

以下是优化后的完整解决方案，只需修改第一个文件ex4.php即可：

    
    
    
    


    

        

            
学生信息
            

                

                    
姓名（nom）
                    

                
                

                    
姓氏（prenom）
                    

                
                

                    
地址（adresse）
                    

                
                

                    
邮政编码（code postal）
                    

                
                

                    

                        
                    
                
            
        
    

这里有几个关键改进点：

关键改进说明

• 纯前端验证：validateAndSubmit()在onsubmit中触发，返回false即可阻止表单提交，完全不需要PHP干预。
• 添加trim()去除首尾空格，避免用户只输入空格被误判为有效数据。
• required属性作为HTML5基础校验，能增强用户体验，但不能替代JS主逻辑。
• 移除了原代码中危险的PHP-JS混写方式，杜绝了XSS风险与语法错误。
• 表单action仍指向ex4sep.php，验证通过后自然提交POST数据，第二页可以安全使用$_POST渲染表格。

注意事项

• 客户端验证不能替代服务端校验。在真实项目中，ex4sep.php仍然需要检查$_POST数据是否存在、是否合法，防止绕过JS提交恶意内容。
• 如果需要更友好的提示，比如高亮错误字段，可以扩展JS添加样式操作。
• 确保两个文件位于同一服务器目录下，且ex4sep.php已正确处理未定义索引，建议加isset()判断。

这样一来，第一个练习就兼具了功能性和健壮性，既满足了题目要求，也奠定了Web表单开发的最佳实践基础。