From c212c7328575362f95138891442eb00afd9163d5 Mon Sep 17 00:00:00 2001
From: NagoColer <404213506@qq.com>
Date: Tue, 11 Apr 2023 14:17:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=B3=A8=E5=86=8C=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E5=86=85=E5=AE=B9=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/welcome/RegisterPage.vue   | 119 +++++++++++++-----
 .../src/views/WelcomeView.vue                 |  10 +-
 2 files changed, 93 insertions(+), 36 deletions(-)

diff --git a/study-project-frontend/src/components/welcome/RegisterPage.vue b/study-project-frontend/src/components/welcome/RegisterPage.vue
index 33aafc9..f242f83 100644
--- a/study-project-frontend/src/components/welcome/RegisterPage.vue
+++ b/study-project-frontend/src/components/welcome/RegisterPage.vue
@@ -5,40 +5,50 @@
             <div style="font-size: 14px;color: grey">欢迎注册我们的学习平台，请在下方填写相关信息</div>
         </div>
         <div style="margin-top: 50px">
-            <el-input v-model="form.username" type="text" placeholder="用户名">
-                <template #prefix>
-                    <el-icon><User /></el-icon>
-                </template>
-            </el-input>
-            <el-input v-model="form.password" type="password" placeholder="密码" style="margin-top: 10px">
-                <template #prefix>
-                    <el-icon><Lock /></el-icon>
-                </template>
-            </el-input>
-            <el-input v-model="form.password_repeat" type="password" placeholder="重复密码" style="margin-top: 10px">
-                <template #prefix>
-                    <el-icon><Lock /></el-icon>
-                </template>
-            </el-input>
-            <el-input v-model="form.email" type="email" placeholder="电子邮件地址" style="margin-top: 10px">
-                <template #prefix>
-                    <el-icon><Message /></el-icon>
-                </template>
-            </el-input>
-        </div>
-        <div style="margin-top: 10px">
-            <el-row :gutter="10" style="width: 100%">
-                <el-col :span="17">
-                    <el-input v-model="form.code" type="text" placeholder="请输入验证码">
+            <el-form :model="form" :rules="rules" @validate="onValidate">
+                <el-form-item prop="username">
+                    <el-input v-model="form.username" type="text" placeholder="用户名">
                         <template #prefix>
-                            <el-icon><EditPen /></el-icon>
+                            <el-icon><User /></el-icon>
                         </template>
                     </el-input>
-                </el-col>
-                <el-col :span="5">
-                    <el-button type="success">获取验证码</el-button>
-                </el-col>
-            </el-row>
+                </el-form-item>
+                <el-form-item prop="password">
+                    <el-input v-model="form.password" type="password" placeholder="密码">
+                        <template #prefix>
+                            <el-icon><Lock /></el-icon>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="password_repeat">
+                    <el-input v-model="form.password_repeat" type="password" placeholder="重复密码">
+                        <template #prefix>
+                            <el-icon><Lock /></el-icon>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="email">
+                    <el-input v-model="form.email" type="email" placeholder="电子邮件地址">
+                        <template #prefix>
+                            <el-icon><Message /></el-icon>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-row :gutter="10" style="width: 100%">
+                        <el-col :span="17">
+                            <el-input v-model="form.code" type="text" placeholder="请输入验证码">
+                                <template #prefix>
+                                    <el-icon><EditPen /></el-icon>
+                                </template>
+                            </el-input>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-button type="success" :disabled="!isEmailValid">获取验证码</el-button>
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+            </el-form>
         </div>
         <div style="margin-top: 80px">
             <el-button style="width: 270px" type="warning" plain>立即注册</el-button>
@@ -53,7 +63,7 @@
 <script setup>
 import {EditPen, Lock, Message, User} from "@element-plus/icons-vue";
 import router from "@/router";
-import {reactive} from "vue";
+import {reactive, ref} from "vue";
 
 const form = reactive({
     username: '',
@@ -62,6 +72,51 @@ const form = reactive({
     email: '',
     code: ''
 })
+
+const validateUsername = (rule, value, callback) => {
+    if (value === '') {
+        callback(new Error('请输入用户名'))
+    } else if(!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)){
+        callback(new Error('用户名不能包含特殊字符，只能是中文/英文'))
+    } else {
+        callback()
+    }
+}
+
+const validatePassword = (rule, value, callback) => {
+    if (value === '') {
+        callback(new Error('请再次输入密码'))
+    } else if (value !== form.password) {
+        callback(new Error("两次输入的密码不一致"))
+    } else {
+        callback()
+    }
+}
+
+const rules = {
+    username: [
+        { validator: validateUsername, trigger: ['blur', 'change'] },
+        { min: 2, max: 8, message: '用户名的长度必须在2-8个字符之间', trigger: ['blur', 'change'] },
+    ],
+    password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { min: 6, max: 16, message: '密码的长度必须在6-16个字符之间', trigger: ['blur', 'change'] }
+    ],
+    password_repeat: [
+        { validator: validatePassword, trigger: ['blur', 'change'] },
+    ],
+    email: [
+        { required: true, message: '请输入邮件地址', trigger: 'blur' },
+        {type: 'email', message: '请输入合法的电子邮件地址', trigger: ['blur', 'change']}
+    ]
+}
+
+const isEmailValid = ref(false)
+
+const onValidate = (prop, isValid) => {
+    if(prop === 'email')
+        isEmailValid.value = isValid
+}
 </script>
 
 <style scoped>
diff --git a/study-project-frontend/src/views/WelcomeView.vue b/study-project-frontend/src/views/WelcomeView.vue
index e51b51d..21c42ed 100644
--- a/study-project-frontend/src/views/WelcomeView.vue
+++ b/study-project-frontend/src/views/WelcomeView.vue
@@ -9,10 +9,12 @@
             <div style="margin-top: 10px">在这里你可以学习如何使用Java，如何搭建网站，并且与Java之父密切交流。</div>
             <div style="margin-top: 5px">在这里你可以同性交友，因为都是男的，没有学Java的女生。</div>
         </div>
-        <div style="width: 400px;background-color: white">
-            <transition name="el-fade-in-linear">
-                <router-view/>
-            </transition>
+        <div style="width: 400px;background-color: white;z-index: 1">
+            <router-view v-slot="{ Component }">
+                <transition name="el-fade-in-linear">
+                    <component :is="Component" />
+                </transition>
+            </router-view>
         </div>
     </div>
 </template>