基于 Ant Design Vue 的登录表单组件实现

应用场景介绍

登录表单是许多应用程序中的常见组件，它允许用户使用凭据（如用户名和密码）进行身份验证。本博客将介绍如何使用 Ant Design Vue 库构建一个功能齐全的登录表单。

代码基本功能介绍

这个登录表单组件具有以下基本功能：

• 表单验证：确保用户输入了必需的信息，并提供清晰的错误消息。
• 记住我功能：允许用户选择在设备上保存其凭据，以便在未来登录时自动填充。
• 忘记密码链接：提供一个链接，用户可以点击该链接重置其密码。
• 客人结账选项：允许用户绕过登录过程并作为客人继续进行。

功能实现步骤及关键代码分析

1. 安装依赖项

首先，需要安装 Ant Design Vue 库和 Formik 表单验证库。

npm install ant-design-vue formik

2. 创建组件模板

创建一个 Vue 组件，并添加 Ant Design Vue 组件库提供的 <a-card> 组件作为登录表单的容器。

<template>
  <div class="flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
      <a-card>
        <template #header>
          <div class="text-center">
            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
              Sign In
            </h2>
          </div>
        </template>
        <template #body>
          <!-- ... 表单内容 ... -->
        </template>
      </a-card>
    </div>
  </div>
</template>

3. 添加表单

在 <a-card> 组件的 <template #body> 部分内，添加一个 <a-form> 组件。<a-form> 组件提供了表单验证功能，并允许您定义表单字段及其验证规则。

<a-form
  :model="formData"
  :rules="rules"
  label-col="{ span: 8 }"
  wrapper-col="{ span: 16 }"
  initialValues={{
    username: 'email@address.com',
    password: '',
  }}
  onFinish="handleSubmit"
  onFinishFailed="onFinishFailed"
  autocomplete="off"
>
  <!-- ... 表单字段 ... -->
</a-form>

• :model 属性绑定到 Vue 的 ref，用于存储表单数据。
• :rules 属性指定了表单字段的验证规则。
• initialValues 属性设置了表单的初始值。
• onFinish 和 onFinishFailed 属性指定了当表单提交成功或失败时的处理函数。

4. 添加表单字段

在 <a-form> 组件内，添加 <a-form-item> 组件以定义表单字段。

<a-form-item
  label="Email"
  name="username"
  rules={[
    {
      required: true,
      message: 'Please input your username!',
    },
  ]}
>
  <a-input placeholder="Email address" />
</a-form-item>
<a-form-item
  label="Password"
  name="password"
  rules={[
    {
      required: true,
      message: 'Please input your password!',
    },
  ]}
>
  <a-input-password placeholder="Password" />
</a-form-item>

• label 属性指定了表单字段的标签。
• name 属性指定了表单字段的名称，它将用于访问表单数据。
• rules 属性指定了表单字段的验证规则。

5. 添加记住我复选框和忘记密码链接

在表单字段下方，添加一个 <a-checkbox> 组件作为记住我复选框，以及一个 <a-a> 组件作为忘记密码链接。

<a-form-item>
  <a-checkbox>Remember me</a-checkbox>
  <a-a href="#" style="float: right;">Forgot password?</a-a>
</a-form-item>

6. 添加提交按钮

最后，添加一个 <a-button> 组件作为提交按钮。

<a-form-item>
  <a-button type="primary" htmlType="submit" block>
    Sign in
  </a-button>
</a-form-item>

• type="primary" 属性将按钮设置为主要按钮。
• htmlType="submit" 属性指定了按钮类型为“submit”，它将触发表单提交。
• block 属性使按钮跨越整个表单。

总结与展望

开发这段代码的过程让我对 Ant Design Vue 库有了更深入的了解，并提高了我构建交互式和可验证表单的能力。未来，该登录表单组件可以进一步扩展和优化，例如：

• 添加社交登录选项。
• 实现两因素身份验证。
• 优化表单的响应能力，使其在不同设备上都能良好显示。