• Czas czytania ~2 min
  • 24.05.2023

Laravel Precognition został poddany przeglądowi i został dostarczony ze świeżym spojrzeniem na przewidywanie wyniku przyszłego żądania HTTP. Zespół Laravel wziął oryginalną wersję i dopracował ją, aby usprawnić walidację front-end i server-side za pomocą popularnych narzędzi

front-end: Laravel Precognition jest gotowy do przewidywania przyszłości! 🧠

Łatwo dodawaj walidację w czasie rzeczywistym do aplikacji Laravel opartych na JS + Inertia bez powielania logiki walidacji na froncie.

Jeśli korzystasz z Livewire, jest to już dla Ciebie łatwe. 😛https://t.co/QSa2RT7bsq .twitter.com/td49eDUReQ

— Taylor Otwell 🪐 (@taylorotwell) May 23, 2023

Dokumenty Pentry zawierają instrukcje dotyczące korzystania z funkcji Precognition z Vue, React, Vue + Inertia.js i React + Inertia.js aby usprawnić walidację. Niezależnie od używanej technologii front-end, trasy, które korzystają z Precognition, muszą tylko zapewniać oprogramowanie pośredniczące dostarczane przez platformę:

use App\Http\Requests\CreateUserRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;

Route::post('/users', function (CreateUserRequest $request) {
    // ...
})->middleware([HandlePrecognitiveRequests::class]);

W zależności od technologii front-end zainstalowanie towarzyszącego modułu NPM sprawia, że walidacja za pomocą Precognition jest dziecinnie prosta. Na przykład poniższy tekst przedstawia komponent formularza z walidacją prekognicji przy użyciu modułu 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>

Gdy użytkownik wypełni formularz, funkcja Precognition będzie obsługiwać dane wyjściowe sprawdzania poprawności na żywo obsługiwane przez reguły sprawdzania poprawności Laravel w żądaniu formularza po stronie serwera.

Front-end ma również kilka przydatnych metod określania poprawności pól i ogólnych informacji na temat walidacji:

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

Zapoznaj się z dokumentacją innych funkcji, takich jak $request->isPrecognative() żądanie formularza po stronie serwera, którego można użyć do zarządzania efektami ubocznymi i dostosowywania reguł walidacji.

Comments

No comments yet
Yurij Finiv

Yurij Finiv

Full stack

O

Professional Fullstack Developer with extensive experience in website and desktop application development. Proficient in a wide range of tools and technologies, including Bootstrap, Tailwind, HTML5, CSS3, PUG, JavaScript, Alpine.js, jQuery, PHP, MODX, and Node.js. Skilled in website development using Symfony, MODX, and Laravel. Experience: Contributed to the development and translation of MODX3 i...

O autorze CrazyBoy49z
WORK EXPERIENCE
Kontakt
Ukraine, Lutsk
+380979856297