Laravel 预知更新已发布

Laravel 预知已被彻底改造，并配备了预测未来 HTTP 请求结果的新视角。Laravel 团队采用了原始版本并对其进行了完善，以简化使用流行的前端工具进行前端和后端验证。

Laravel 预知已准备好预测未来！🧠

无需在前端重复验证逻辑，即可轻松为您的 JS + Inertia 支持的 Laravel 应用程序添加实时验证。

如果您使用的是 Livewire，这对于您来说已经很容易了。😛https://t.co/QSa2RT7bsq pic.twitter.com/td49eDUReQ
— Taylor Otwell 🪐 (@taylorotwell) 2023 年 5 月 23 日

预知文档中提供了使用预知与 Vue、React、Vue + Inertia.js 和 React + Inertia.js 进行验证的说明。无论您使用哪种前端技术，使用预知的路由只需要提供框架提供的中间件。

use App\Http\Requests\CreateUserRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
 
Route::post('/users', function (CreateUserRequest $request) {
    // ...
})->middleware([HandlePrecognitiveRequests::class]);

根据您的前端技术，安装相应的 NPM 模块可以使使用预知进行验证变得轻而易举。例如，以下是一个使用 laravel-precognition-vue 模块的具有预知验证的表单组件。

<script setup>
import { useForm } from 'laravel-precognition-vue';
 
const form = useForm('post', '/users', {
    name: '',
    email: '',
});
 
const submit = () => form.submit();
</script>
 
<template>
    <form @submit.prevent="submit">
        <label for="name">Name</label>
        <input
            id="name"
            v-model="form.name"
            @change="form.validate('name')"
        />
        <div v-if="form.invalid('name')">
            {{ form.errors.name }}
        </div>
 
        <label for="email">Email</label>
        <input
            id="email"
            type="email"
            v-model="form.email"
            @change="form.validate('email')"
        />
        <div v-if="form.invalid('email')">
            {{ form.errors.email }}
        </div>
 
        <button>Create User</button>
    </form>
</template>

当用户填写表单时，预知将处理由 Laravel 后端验证规则支持的实时验证输出表单请求.

前端还提供了一些有用的方法来确定字段的验证和关于验证的一般信息。

form.hasErrors();
form.valid('email');
form.invalid('email');
form.validating;
 
form.submit()
    .then(response => {
        form.reset();
        // ...
    })
    .catch(error => {
        // ...
    });