本文中的文字部分由 ChatGPT 和 DeepL Write 生成，並由我們修正和修改。
如果您還不熟悉使用 Alpine.js 處理表單，您可以在我們關於此主題的第一篇文章《使用 Alpine.js 的互動式表單》中刷新您的知識。
在我們第一篇關於使用 Alpine.js 進行互動表單的文章中，我們已經指出，除了在表單中一般顯示伺服器端資訊之外，Alpine.js 還可以用於影響單一元素。
由於大眾的需求，我們決定在這篇後續文章中專門討論這個主題，並展示如何使用資訊和狀態透過 Alpine.js 驗證表單的範例。
在本次示範中，我們使用 Astro Boilerplate，
我們已經在之前的文章中詳細介紹過。
如果我們的樣板不適合您，那也不是問題。驗證表單條目的步驟適用於任何使用 Alpine.js 的項目。
為了能夠在後續的實作過程中從 Alpine.js 存取所需的資料和方法，首先聲明這些資料和方法，以避免後續過程中出現錯誤。
form()控制載入狀態，並保存伺服器透過submit()方法傳送的Response，該方法在表單提交時執行。
還包括一個虛構的 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;
},
});
回應必須包含一個錯誤對象，其中每個鍵值對由輸入元素的名稱和關聯的驗證錯誤組成。
input.ts 透過 validate() 方法處理輸入元素驗證錯誤的顯示，該方法透過 x-effect 屬性集成，以便在提交表單時重新計算要顯示的資料。
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];
},
});
最後，為此步驟匯入為 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();
為了讓我們也可以使用輸入元素的名稱作為標籤，我們創建了大寫方法，該方法分割以短橫線大小寫形式編寫的字串（例如：「電子郵件地址」 ）並將每個單字大寫。
如果您決定不使用大寫，則必須刪除 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;
},
});
在接下來的步驟中，我們建立表單所需的頁面和元件。我們定義一個;元件並將其整合到表單區塊中。
input.astro 組合了元素 ;和在一個元件中，也包含驗證錯誤的表示，這些錯誤透過 Alpine 上下文輸入進行對應。
---
從“@/scripts/utilities”導入{大寫}
const { 名稱, ...props } = Astro.props
---
<div>
<h3>
索引.astro
</h3>
<p>index.astro 代表我們的表單區塊並使用預定義元件 <input>>並以表單上下文補充其邏輯，以便可以顯示來自回應物件的錯誤。 </p>
<p>而我們的元件 <input>>處理驗證錯誤的顯示，我們將各個輸入元素的停用屬性綁定到載入狀態，以防止在處理過程中多次提交表單。 <br>
</p>
<pre class="brush:php;toolbar:false">---
從“@/layouts/root.astro”導入根
從“@/components/input.astro”導入輸入
常量元 = {
標題：“Alpine.js 的高級表單”
}
---
<hr>
<h2>
長話短說
</h2>
<p>透過 Alpine.js，我們示範了來自後端的驗證錯誤如何動態顯示在表單中，以及輸入元素如何對瀏覽器中的對應事件做出反應。 </p>
以上是使用 Alpine.js 的高階表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
