Borang lanjutan dengan Alpine.js

Teks dalam artikel ini dijana sebahagiannya oleh ChatGPT dan DeepL Write serta diperbetulkan serta disemak oleh kami.

Jika anda belum biasa mengerjakan borang dengan Alpine.js, anda boleh menyegarkan pengetahuan anda dalam artikel pertama kami tentang topik ini, Borang interaktif dengan Alpine.js.

Dalam artikel pertama kami tentang borang interaktif dengan Alpine.js, kami telah menyatakan bahawa Alpine.js juga boleh digunakan untuk mempengaruhi elemen individu sebagai tambahan kepada paparan umum maklumat sisi pelayan dalam borang.

Disebabkan permintaan ramai, kami telah memutuskan untuk mengambil topik ini dengan tepat dalam artikel susulan ini dan menunjukkan contoh cara anda boleh menggunakan maklumat dan keadaan untuk mengesahkan borang dengan Alpine.js.

Persediaan

Untuk demonstrasi ini, kami menggunakan Astro Boilerplate kami,
yang telah kami bentangkan secara terperinci dalam artikel sebelum ini.

Jika boilerplate kami tidak sesuai untuk anda, itu tidak menjadi masalah. Langkah-langkah untuk mengesahkan entri borang berfungsi dalam mana-mana projek dengan Alpine.js.

Mengintegrasikan kaedah untuk Alpine.js

Untuk dapat mengakses data dan kaedah yang diperlukan daripada Alpine.js dalam pelaksanaan selanjutnya, ini pertama kali diisytiharkan untuk mengelakkan ralat dalam kursus selanjutnya.

borang.ts

form() mengawal keadaan pemuatan dan menyimpan Respons yang dihantar oleh pelayan melalui kaedah submit(), yang dilaksanakan apabila borang diserahkan.

FakeResponse() rekaan juga disertakan, yang "menerima" ralat pengesahan teladan dan dipermudahkan daripada bahagian belakang rekaan kami.

import { sleep } from "../utilities";

export const form = () => ({
  loading: false,
  response: null as unknown,

  async submit(event: SubmitEvent) {
    this.loading = true;
    this.response = null;
    const formData = new FormData(event.target as HTMLFormElement);

    /**
     * Replace the following fake response with your `fetch` request and
     * receive the validated results from the server side as JSON.
     *
     * Make sure you add the necessary attributes to the `<Input />'
     * elements to perform client-side validation as well.
     */

    const fakeResponse = async () => {
      await sleep(1000); // Mock response time

      return {
        errors: {
          // [input.name]: "message string"
          username: "Username is alrady taken",
          password: "Password is too short",
        },
      };
    };

    this.response = await fakeResponse();
    this.loading = false;
  },
});

Respons mesti mengandungi objek ralat di mana setiap pasangan nilai kunci terdiri daripada nama elemen input dan ralat pengesahan yang berkaitan.

input.ts

input.ts mengendalikan paparan ralat pengesahan untuk elemen input melalui kaedah validate(), yang disepadukan melalui atribut x-effect untuk mengira semula data untuk paparan apabila borang diserahkan.

export const input = () => ({
  error: null as unknown,

  validate() {
    if (!this.response?.errors?.[this.$el.name]) return (this.error = null);
    this.error = this.response.errors[this.$el.name];
  },
});

globals.ts

Akhir sekali, kaedah yang diisytiharkan untuk Alpine.js diimport untuk langkah ini dan didaftarkan dalam EventListener alpine:init agar dapat mengakses skop yang diperlukan.

import Alpine from "alpinejs";
import { app } from "./alpine/app";
import { form } from "./alpine/form";
import { input } from "./alpine/input";

// Await Alpine.js initialization
document.addEventListener("alpine:init", () => {
  Alpine.data("app", app);
  Alpine.data("form", form);
  Alpine.data("input", input);
});

Alpine.start();

Mengisytiharkan kaedah utiliti pilihan

Supaya kami juga boleh menggunakan nama untuk elemen input sebagai label, kami mencipta kaedah menggunakan huruf besar, yang membelah rentetan yang ditulis dalam huruf kebab (cth.: "alamat e-mel") dan menggunakan huruf besar setiap perkataan.

Jika anda memutuskan untuk tidak menggunakan huruf besar, rujukan yang sepadan dalam komponen input.astro mesti dialih keluar

import { sleep } from "../utilities";

export const form = () => ({
  loading: false,
  response: null as unknown,

  async submit(event: SubmitEvent) {
    this.loading = true;
    this.response = null;
    const formData = new FormData(event.target as HTMLFormElement);

    /**
     * Replace the following fake response with your `fetch` request and
     * receive the validated results from the server side as JSON.
     *
     * Make sure you add the necessary attributes to the `<Input />'
     * elements to perform client-side validation as well.
     */

    const fakeResponse = async () => {
      await sleep(1000); // Mock response time

      return {
        errors: {
          // [input.name]: "message string"
          username: "Username is alrady taken",
          password: "Password is too short",
        },
      };
    };

    this.response = await fakeResponse();
    this.loading = false;
  },
});

Mencipta halaman dan komponen dalam Astro

Dalam langkah berikut, kami mencipta halaman dan komponen yang kami perlukan untuk borang. Kami mentakrifkan komponen dan sepadukannya ke dalam blok borang.

input.astro

input.astro menggabungkan elemen dan dalam satu komponen dan juga mengandungi perwakilan ralat pengesahan, yang dipetakan melalui input konteks Alpine.

---
import { huruf besar } daripada "@/scripts/utiliti"

const { name, ...props } = Astro.props
---

<div
 >



<h3>
  
  
  indeks.astro
</h3>

<p>index.astro mewakili blok borang kami dan menggunakan komponen yang telah ditetapkan <Input /> dan menambah logiknya dengan konteks bentuk supaya ralat daripada objek tindak balas boleh dipaparkan.</p>

<p>Sementara komponen kami <Input /> mengendalikan paparan ralat pengesahan, kami mengikat atribut yang dilumpuhkan bagi elemen input individu kepada keadaan pemuatan untuk mengelakkan penyerahan berbilang borang semasa pemprosesan.<br>
</p>

<pre class="brush:php;toolbar:false">---
import Root daripada "@/layouts/root.astro"
import Input daripada "@/components/input.astro"

const meta = {
  tajuk: "Borang lanjutan dengan Alpine.js"
}
---

<Root {meta}>
  <utama>
    <bentuk
     >




<hr>

<h2>
  
  
  TL;DR
</h2>

<p>Dengan Alpine.js, kami menunjukkan cara ralat pengesahan dari bahagian belakang dipaparkan secara dinamik dalam bentuk dan cara elemen input bertindak balas terhadap peristiwa yang sepadan dalam penyemak imbas.</p>


          

            
  

            
        

Atas ialah kandungan terperinci Borang lanjutan dengan Alpine.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!