本文中的文字部分由 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中文网其他相关文章！
