Alpine.js를 사용한 고급 양식

이 기사의 텍스트는 ChatGPT와 DeepL Write에서 일부 생성되었으며 당사에서 수정 및 개정되었습니다.

아직 Alpine.js를 사용한 양식 작업에 익숙하지 않은 경우 이 주제에 대한 첫 번째 기사인 Alpine.js를 사용한 대화형 양식에서 지식을 되새길 수 있습니다.

Alpine.js를 사용한 대화형 양식에 대한 첫 번째 기사에서 우리는 이미 Alpine.js를 사용하여 양식에 있는 서버측 정보의 일반적인 표시 외에도 개별 요소에 영향을 미칠 수 있음을 밝혔습니다.

대중적인 요구로 인해 우리는 이 후속 기사에서 이 주제를 정확하게 다루고 Alpine.js에서 정보와 상태를 사용하여 양식의 유효성을 검사하는 방법에 대한 예를 보여 주기로 결정했습니다.

설정

이 시연에서는 Astro Boilerplate를 사용합니다.
이전 기사에서 이미 자세히 설명했습니다.

저희 상용구가 귀하에게 적합하지 않더라도 문제가 되지 않습니다. 양식 항목의 유효성을 검사하는 단계는 Alpine.js를 사용하는 모든 프로젝트에서 작동합니다.

Alpine.js에 대한 방법 통합

향후 구현 과정에서 Alpine.js의 필수 데이터 및 메소드에 액세스할 수 있도록 다음 과정에서 오류를 방지하기 위해 먼저 선언합니다.

form.ts

form()은 로딩 상태를 제어하고, 양식이 제출될 때 실행되는 submit() 메소드를 통해 서버에서 보낸 응답을 저장합니다.

가상의 백엔드에서 예시적이고 단순화된 검증 오류를 "수신"하는 가상의 fakeResponse()도 포함되어 있습니다.

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;
  },
});

응답에는 각 키-값 쌍이 입력 요소의 이름과 관련 유효성 검사 오류로 구성된 오류 개체가 포함되어야 합니다.

입력.ts

input.ts는 양식이 제출될 때 표시할 데이터를 다시 계산하기 위해 x-효과 속성을 통해 통합된 유효성 검사() 메서드를 통해 입력 요소에 대한 유효성 검사 오류 표시를 처리합니다.

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

마지막으로 필요한 범위에 액세스할 수 있도록 Alpine.js에 대해 선언된 메서드를 이 단계에서 가져오고 EventListener alpine:init에 등록합니다.

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();

선택적 유틸리티 메소드 선언

입력 요소의 이름을 레이블로 사용할 수도 있도록 kebab-case(예: "email-address")로 작성된 문자열을 분할하고 각 단어를 대문자로 표시하는 capitalize 메소드를 만듭니다.

대문자를 사용하지 않기로 결정한 경우 input.astro 구성 요소에서 해당 참조를 제거해야 합니다

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;
  },
});

Astro에서 페이지 및 구성 요소 만들기

다음 단계에서는 양식에 필요한 페이지와 구성 요소를 만듭니다. 구성 요소를 만들어 양식 블록에 통합합니다.

입력.아스트로

input.astro는 요소를 결합합니다. 및 <라벨> 하나의 구성 요소에 포함되어 있으며 Alpine 컨텍스트 입력을 통해 매핑되는 유효성 검사 오류 표현도 포함합니다.

---
"@/scripts/utilities"에서 { 대문자로 } 가져오기

const { 이름, ...props } = Astro.props
---

<div
 >



<h3>
  
  
  index.astro
</h3>

<p>index.astro는 양식 블록을 나타내며 사전 정의된 구성요소 <Input /> 응답 개체의 오류가 표시될 수 있도록 양식 컨텍스트로 논리를 보완합니다.</p>

<p>구성요소 <Input /> 유효성 검사 오류 표시를 처리하면서 처리 중에 양식이 여러 번 제출되는 것을 방지하기 위해 개별 입력 요소의 비활성화된 속성을 로드 상태에 바인딩합니다.<br>
</p>

<pre class="brush:php;toolbar:false">---
"@/layouts/root.astro"에서 루트 가져오기
"@/comComponents/input.astro"에서 입력 가져오기

const 메타 = {
  title: "Alpine.js를 사용한 고급 양식"
}
---

<루트 {메타}>
  <메인>
    <양식
     >




<hr>

<h2>
  
  
  TL;DR
</h2>

<p>Alpine.js를 사용하여 백엔드의 유효성 검사 오류가 양식에 동적으로 표시되는 방식과 입력 요소가 브라우저의 해당 이벤트에 어떻게 반응하는지 보여줍니다.</p>


          

            
  

            
        

위 내용은 Alpine.js를 사용한 고급 양식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!