From ea6f004b9150724dc3539cb3da83a79e40f05a7a Mon Sep 17 00:00:00 2001
From: xuewuerduo <53554701+xuewuerduo@users.noreply.github.com>
Date: Sun, 14 Jul 2024 21:44:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json         |  1 +
 package.json              |  1 +
 src/views/admin/login.vue | 46 ++++++++++++++++++++++++++++-----------
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index feda032..e8c3482 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "cms",
       "version": "0.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
         "element-plus": "^2.7.7",
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.1",
diff --git a/package.json b/package.json
index 151ca18..037c0e1 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.7.7",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
diff --git a/src/views/admin/login.vue b/src/views/admin/login.vue
index 3de5ae1..0904992 100644
--- a/src/views/admin/login.vue
+++ b/src/views/admin/login.vue
@@ -1,34 +1,54 @@
 <script setup>
 import '@/assets/admin/css/login.css' //导入样式
-import { reactive } from 'vue'
-import { User,Lock } from '@element-plus/icons-vue' //图标
+import {reactive, ref} from 'vue'
+  import { User,Lock } from '@element-plus/icons-vue' //图标
 
-const data = reactive({
-  name: '',
-  password: '',
-})
-const login = () => {
-  console.log(data)
-}
+  const data = reactive({
+    name: '',
+    password: '',
+  })
+
+
+  //校验规则
+  const rules = {
+  name: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 2,max: 10, message: '用户名长度限制 [2 - 10]个字符', trigger: 'blur' }
+  ],
+    password: [
+      {required: true, message: '请输入密码', trigger: 'blur' }
+    ]
+  }
+
+  const elFormRef = ref()  //存储 <el-form>组件实例的引用
+
+  const login = () => {
+    console.log(data)
+
+
+    elFormRef.value.validate((valid, fields) => {
+      console.log(valid, fields)
+    })
+  }
 
 </script>
 <template>
   <div class="dr-login">
-    <el-form :model='data'>
+    <el-form :model='data' :rules='rules'>
       <div class="title">
         DR_CMS
       </div>
 
-      <el-form-item>
+      <el-form-item prop="name">
         <el-input :prefix-icon="User" v-model="data.name" />
       </el-form-item>
 
-      <el-form-item>
+      <el-form-item prop="password">
         <el-input :prefix-icon="Lock" show-password v-model="data.password" />
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" @click="login">登录</el-button>
+        <el-button type="primary" @click="login" ref="elFormRef">登录</el-button>
       </el-form-item>
 
     </el-form>