Svelte 中的表单验证：使用 Yup 简化输入验证

表单仍然是用户与网络应用程序交互的主要方式。在处理表单时，开发人员必须跟踪用户输入、验证输入是否有效以及显示错误，同时还要处理表单提交。本文将深入探讨 Svelte 中的输入绑定机制，并展示如何使用强大的 Yup 库轻松实现表单验证。

输入绑定

Svelte 中的输入绑定允许双向数据绑定，使表单元素与存储数据的响应式变量保持同步。它通过以下方式实现：

<input bind:value={name} />

此代码片段创建一个输入元素，其中 value 属性绑定到 name 响应式变量。任何对输入值的更改都会反映在 name 变量中，反之亦然。

Yup 验证

Yup 是一个功能强大的 JavaScript 库，用于验证和转换 JavaScript 对象。它提供了一个直观的 API，用于定义验证规则和对输入值进行验证。

要使用 Yup 进行表单验证，首先需要安装库：

npm install yup

然后，可以定义一个验证架构，其中包含输入字段的验证规则：

const schema = yup.object().shape({
  name: yup.string().required(),
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
});

此架构定义了三个字段的验证规则：

• name：必填字段，类型为字符串。
• email：必填字段，类型为电子邮件地址。
• password：必填字段，类型为字符串，最小长度为 8。

验证和错误处理

要验证用户输入，可以使用 validate() 方法：

const validationResult = schema.validate({ name, email, password });

如果验证成功，validationResult 将是一个空对象。如果验证失败，它将包含一个错误消息对象，指示无效的字段和错误类型。

可以使用这些错误消息来更新 UI 并显示给用户。Svelte 提供了 show() 函数，用于有条件地渲染元素：

{#if errorMessage}
  <div class="error-message">{errorMessage}</div>
{/if}

表单提交

验证表单后，就可以提交表单了。Svelte 提供了 on:submit 事件处理程序，用于监听表单提交事件。

<form on:submit|preventDefault={submitForm}>
  ...
</form>

preventDefault() 函数用于防止表单默认提交，以便我们可以处理自定义逻辑。在 submitForm 函数中，可以处理表单数据并根据需要执行其他操作。

结论

Svelte 中的表单验证通过 Yup 库变得轻而易举。使用输入绑定和 Yup 验证，开发人员可以轻松验证用户输入、跟踪错误并处理表单提交。通过遵循本文中概述的步骤，您可以为您的 Svelte 应用程序构建健壮且用户友好的表单。