From 7401ef7941b7fa29b95203d5c796f9a269768120 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 28 Jun 2023 08:38:26 +0800
Subject: [PATCH] fix validator

---
 src/@validators/index.ts |  4 ++++
 src/pages/login.vue      | 14 ++++++++------
 tsconfig.json            |  8 +++++++-
 3 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 src/@validators/index.ts

diff --git a/src/@validators/index.ts b/src/@validators/index.ts
new file mode 100644
index 00000000..9c476b04
--- /dev/null
+++ b/src/@validators/index.ts
@@ -0,0 +1,4 @@
+import { ValidationRule } from 'vuetify/types/services/validation'
+
+// 必输校验
+export const requiredValidator: ValidationRule = (value: any) => !!value || '此项为必填项'
diff --git a/src/pages/login.vue b/src/pages/login.vue
index dd40d643..d7804a9c 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { requiredValidator } from '@/@validators';
 import api from '@/api';
 import router from '@/router';
 import logo from '@images/logo.svg?raw';
+import type { VForm } from 'vuetify/components/VForm';
 import { useStore } from 'vuex';
 
 // Vuex Store
@@ -13,6 +15,7 @@ const form = ref({
   password: '',
   remember: true,
 })
+const refForm = ref<InstanceType<typeof VForm> | null>(null)
 
 // 密码输入
 const isPasswordVisible = ref(false)
@@ -38,9 +41,8 @@ const fetchBackgroundImage = async () => {
 // 登录获取token事件
 const login = () => {
   errorMessage.value = ''
-  if (!form.value.username || !form.value.password) {
-    errorMessage.value = '请输入用户名和密码'
-
+  // 进行表单校验
+  if (refForm.value && !refForm.value.validate()) {
     return
   }
 
@@ -133,7 +135,7 @@ onMounted(() => {
       </VCardText>
 
       <VCardText>
-        <VForm @submit.prevent="login">
+        <VForm @submit.prevent="login" ref="refForm">
           <VRow>
             <!-- username -->
             <VCol cols="12">
@@ -141,7 +143,7 @@ onMounted(() => {
                 v-model="form.username"
                 label="用户名"
                 type="text"
-                required
+                :rules="[requiredValidator]"
               />
             </VCol>
 
@@ -154,7 +156,7 @@ onMounted(() => {
                 :append-inner-icon="
                   isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
                 "
-                required
+                :rules="[requiredValidator]"
                 @click:append-inner="isPasswordVisible = !isPasswordVisible"
               />
 
diff --git a/tsconfig.json b/tsconfig.json
index be230b59..920a27d5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,12 +29,18 @@
       "@core": [
         "src/@core"
       ],
+      "@validators": [
+        "src/@validators"
+      ],
+      "@validators/*": [
+        "src/@validators/*"
+      ],
       "@images/*": [
         "src/assets/images/*"
       ],
       "@styles/*": [
         "src/styles/*"
-      ]
+      ],
     },
     "lib": [
       "esnext",