vue3.0 + TS + AntD 项目开发学习笔记：Form 表单的使用

在项目开发中经常使用到 Form 表单，这篇文章记录一下 Form 表单的用法。

参考 antd 官方网站，有介绍 Form 表单的基本使用方法。这篇文章结合实际项目来学习 Form 表单的使用。 一般系统网站用到 Form 表单的情况就是登录页面，修改密码等。

以下代码是登录页面的代码：

<template>
  <div id="login">
      <a-form :model="formState" name="normal_login">
        <a-form-item name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
          <a-input v-model:value="formState.username" placeholder="username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
          <a-input-password v-model:value="formState.password" placeholder="password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button :disabled="disabled" type="primary" @click="onLogin(formState)">
            {{ $t('common.user.login') }}
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </a-layout-content>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { onLogin, formState } from '@/logic/useUser';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import Header from './component/Header.vue';
// 表单数据为空时，按钮失效
const disabled = computed(() => {
  return !(formState.username && formState.password);
});

</script>

登录页面的代码比较简单，就是输入账号和密码，带上表单验证功能，使用 rules 规则。计算属性 disabled 来判断账号和密码是否输入，有空缺项按钮就会被禁止。 渲染效果如图所示：

修改密码页面部分代码如下：

<template>
<a-form ref="formRef" :model="formState" name="normal_login" class="login-form">
      <a-form-item v-bind="validateInfos.email">
        <a-input v-model:value="formState.email" :placeholder="$t('common.user.email')">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item v-bind="validateInfos.certify">
        <a-row type="flex" justify="space-between">
          <a-col :span="13">
            <a-input v-model:value="formState.certify" :placeholder="$t('common.user.certify')" />
          </a-col>
          <a-button v-show="!show" :disabled="disabled" type="primary" @click="onCheck(formRef)">
            {{ $t('common.user.code') }}
          </a-button>
          <a-button v-show="show" disabled type="primary">
            {{ count }} s {{ $t('common.user.recode') }}
          </a-button>
        </a-row>
      </a-form-item>
      <a-form-item v-bind="validateInfos.password">
        <a-input-password v-model:value="formState.password" :placeholder="$t('common.user.password')">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item v-bind="validateInfos.confirmPWD">
        <a-input-password v-model:value="formState.confirmPWD" :placeholder="$t('common.user.confirmPwd')">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>
    </a-form>
</template>
<script setup lang="ts">
// 验证表单规则
const rulesRef: Record<string, Rule[]> = {
  email: [{ required: true, validator: checkEmail }],
  certify: [{ required: true, message: t('common.message.certify') }],
  password: [{ required: true, validator: checkPassword }],
  confirmPWD: [{ required: true, validator: checkConfirmPWD }]
};
// 表单验证
const { validate, validateInfos } = useForm(formState, rulesRef);
</script>

修改密码页面，需要用到邮箱验证码，以及输入新密码和确认新密码。每一项都需要验证，而且验证的内容不一样，所以每一项 formItem 都绑定了一个验证规则，用 v-bind 绑定，验证规则则用 rulesRef 定义一个对象，不同属性代表不同的验证规则。

以密码验证规则举例，命名为 checkPassword, 密码输入要求大小写字母加数字，代码如下：

// 密码验证规则
const checkPassword = (_: any, value: string) => {
  const justify = "^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)[0-9A-Za-z]{6,16}$";
  if (!value.match(justify)) {
    return Promise.reject(new Error(t('common.message.passwordType')));
  }
  return Promise.resolve();
};

而确认密码验证要求是与新密码一致，命名为 checkConfirmPWD, 代码如下：

// 密码确认验证规则
const checkConfirmPWD = (_: any, value: string) => {
  if (value !== formState.password) {
    return Promise.reject(new Error(t('common.message.notSame')));
  }
  return Promise.resolve();
};

当然还有一个重要的环节就是在提交表单的时候要全部验证，就使用了 @click.prevent="getBack" 方法。代码如下：

/**
 * 找回密码, 验证表单
 * @params params 
 */
const getBack = () => {
  validate().then(() => {
      const params = {
        email: formState.email,
        verifycode: formState.certify,
        password: AES_Encrypt(formState.password)
      }
      // 发起忘记密码 api 网络请求
      userStore.forgetPwd(params).then(() => {
        router.push({ name: 'Login' });
      });
    }).catch(err => {
      console.log('error', err);
    })
}

validate().then 就是要表单都验证通过才能进行下一步操作。渲染效果如图所示：

以上就是在用 Form 表单时比较复杂的用法，这里简单做了一个整理，以便不时之需。