hhsk

HuStoking

ant-design-vue 登錄表單校驗(yàn)

最近剛剛上手了 Vue3 的 antdv ui框架，來做個(gè)簡單的登錄校驗(yàn)練練手??

安裝 `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>

基本的樣式只有上面的幾行代碼，后續(xù)的邏輯都是關(guān)于表單驗(yàn)證的。下面來寫一下 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 屬性可以獲取表單實(shí)例

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

// 用戶名校驗(yàn)規(guī)則
const userNameCheck = async (_rule: Rule, value: string) => {
  if (!value) {
    return Promise.reject('用戶名不能為空')
  } else if (value.length <= 2) {
    return Promise.reject('用戶名長度不能小于兩個(gè)字符')
  } else {
    return Promise.resolve()
  }
}

// 密碼校驗(yàn)規(guī)則
const passWordCheck = async (_rule: Rule, value: string) => {
  if (!value) {
    return Promise.reject('密碼不能為空')
  } else if (value.length < 5) {
    return Promise.reject('密碼長度不能小于5個(gè)字符')
  } else {
    return Promise.resolve()
  }
}

</script>

寫好基本的校驗(yàn)規(guī)則后，就可以將相關(guān)的內(nèi)容加到 <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 會在輸入框失焦時(shí)觸發(fā)表單校驗(yàn)，=change會在點(diǎn)擊登錄時(shí)觸發(fā)校驗(yàn) -->
    <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" 才可以使按鈕具有表單校驗(yàn)的功能，才可以使 @finsih屬性生效 -->
  </a-form-item>
</a-form>

可以看到上面的 <a-form> 有一個(gè) @finish 的屬性，其值為一個(gè)名為「jump」的函數(shù)，作用是 在點(diǎn)擊按鈕后，如果校驗(yàn)成功則進(jìn)行路由跳轉(zhuǎn)