Laravel Precognition通过前端发送带X-Precognition头的请求，使后端仅执行验证规则并返回结果，实现表单实时校验。1. 它是一种设计模式或扩展库技术，核心是在用户填写时预验证。2. 前端设置X-Precognition: true和Content-Type: application/json，后端检测到该头则跳过业务逻辑，仅运行Form Request验证，如检查邮箱唯一性。3. 使用Axios在input或blur事件发送请求，根据422响应动态显示错误提示。4. 默认需手动处理中间件判断header并返回204，也可用mews/precognition包自动拦截。最终实现前后端共用验证逻辑，提升体验。
Laravel Precognition 是一个让前端能在用户提交表单前就进行实时验证的解决方案。它通过预判（Precognition）请求模拟 Laravel 后端验证逻辑，提前返回错误信息，从而实现无缝的实时表单校验体验。
1. 什么是 Laravel Precognition
Precognition 并非 Laravel 核心功能，而是一种设计模式或可通过扩展库实现的技术。它的核心思想是：在用户填写表单时，前端发送带有特殊 header 的请求到后端，Laravel 接收到后不执行实际逻辑（如存储数据），只运行验证规则，并返回验证结果。
这种方式让你可以在不提交表单的情况下，实时提示用户输入是否符合要求，比如邮箱格式、密码强度、字段唯一性等。
2. 实现原理与关键 Header
要启用 Precognition 验证，前端请求中需要添加特定的 header：
立即学习“前端免费学习笔记（深入）”；
X-Precognition: 设为 true，告诉 Laravel 这是一个预验证请求 Content-Type: application/json
当 Laravel 检测到 X-Precognition: true 时，会跳过控制器中的业务逻辑（如创建用户），仅执行 Form Request 中的验证规则，并返回 204 No Content 或 422 Unprocessable Entity 响应。
例如，你有一个 StoreUserRequest：
class StoreUserRequest extends FormRequest{ public function rules() { return [ 'email' => 'required|email|unique:users', 'password' => 'required|min:8' ]; }}
前端在用户输入 email 时立即发送带 X-Precognition 的请求，后端就会检查 email 是否合法和唯一，但不会真正创建用户。
3. 前端如何集成
使用 Axios 或 Fetch 发送请求时设置 header：
axios.post('/api/register', { email, password }, { headers: { 'X-Precognition': 'true' }}).then(() => { // 无错误，可继续}).catch(error => { // error.response.data.errors 包含验证错误信息});
你可以绑定在 input 的 blur 或 input 事件上，实现输入即校验的效果。
配合 Vue、React 等框架，很容易做到动态显示错误提示：
用户离开邮箱输入框 → 发起 Precognition 请求 后端返回 email 已存在 → 前端显示“该邮箱已被注册”
4. 后端支持与中间件处理
Laravel 默认不处理 Precognition，需自行判断 header 并中断后续逻辑。可在中间件或基类控制器中处理：
if ($request->header('X-Precognition')) { return response()->noContent();}
这样一旦验证通过，直接返回 204，避免执行后面的存储操作。
也可以使用社区包如 mews/precognition 来简化集成：
composer require mews/precognition
该包自动识别 X-Precognition 请求并拦截，无需手动写判断逻辑。
基本上就这些。Laravel Precognition 实时验证的关键在于“预请求 + 特殊 header + 验证规则复用”，让前后端共用同一套验证逻辑，减少重复代码，提升用户体验。
以上就是laravel Precognition如何实现实时前端验证_Laravel Precognition实时前端验证方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/6384.html
微信扫一扫 
支付宝扫一扫 
