ant-design-vue 登录表单校验

最近刚刚上手了 Vue3 的 antdv ui框架，来做个简单的登录校验练练手

安装 antdv 依赖

npm install ant-design-vue --save

在 main.ts/js 中注册

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'ant-design-vue/dist/antd.css'
import Antd from 'ant-design-vue'

createApp(App).use(Antd).mount('#app')

编写登录页面

登录界面的具体代码在这里，博客中只展示重要的逻辑和样式。

// LoginPage.vue
<template>
  <a-form>
    <a-form-item>
      <a-input placeholder="请输入用户名"></a-input>
    </a-form-item>
    <a-form-item>
      <a-input-password placeholder="请输入密码"></a-input-password>
    </a-form-item>
    <a-form-item>
      <a-button>登录</a-button>
    </a-form-item>
  </a-form>
</template>

基本的样式只有上面的几行代码，后续的逻辑都是关于表单验证的。下面来写一下 js 代码：

<script lang="ts" setup>
import {FormInstance} from "ant-design-vue";
import {reactive, ref} from "vue";
import {Rule} from "ant-design-vue/es/form";

const formRef = ref<FormInstance>(); // 通过为 form 加上 ref 属性可以获取表单实例

// 定义表单域
const formState = reactive({
  userName: '',
  passWord: ''
});

// 用户名校验规则
const userNameCheck = async (_rule: Rule, value: string) => {
  if (!value) {
    return Promise.reject('用户名不能为空')
  } else if (value.length <= 2) {
    return Promise.reject('用户名长度不能小于两个字符')
  } else {
    return Promise.resolve()
  }
}

// 密码校验规则
const passWordCheck = async (_rule: Rule, value: string) => {
  if (!value) {
    return Promise.reject('密码不能为空')
  } else if (value.length < 5) {
    return Promise.reject('密码长度不能小于5个字符')
  } else {
    return Promise.resolve()
  }
}

</script>

---

写好基本的校验规则后，就可以将相关的内容加到 <template> 中了：

<a-form :model="formState" ref="formRef" @finish="jump">
  <!-- @finish="jump" 下面的js代码会提到 -->
  <a-form-item :rules="[{validator: userNameCheck, trigger: 'blur'}]" name="userName">
    <!-- form-item 必须加上 name 属性，且需要和 formState 中的属性同名 -->
    <a-input
        placeholder="请输入用户名"
        v-model:value="formState.userName"
    ></a-input>
  </a-form-item>
  <a-form-item name="passWord" :rules="[{validator: passWordCheck, trigger: 'blur'}]">
    <!-- trigger=blur 会在输入框失焦时触发表单校验，=change会在点击登录时触发校验 -->
    <a-input-password placeholder="请输入密码" v-model:value="formState.passWord"></a-input-password>
  </a-form-item>
  <a-form-item>
    <a-button type="primary" html-type="submit">登录</a-button>
    <!-- 只有填写了 html-type="submit" 才可以使按钮具有表单校验的功能，才可以使 @finsih属性生效 -->
  </a-form-item>
</a-form>

可以看到上面的 <a-form> 有一个 @finish 的属性，其值为一个名为 「jump」的函数，作用是 在点击按钮后，如果校验成功则进行路由跳转

function jump() {
  router.push('/');
}

测试

在线浏览页面

在未满足校验条件点击提交 或者输入框失去焦点后，会触发校验失败的提示：

如果填写的内容满足要求，则会在点击按钮后执行 路由跳转