完成注册相关内容校验

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="用户名">
+            <el-form :model="form" :rules="rules" @validate="onValidate">
-                <template #prefix>
+                <el-form-item prop="username">
-                    <el-icon><User /></el-icon>
+                    <el-input v-model="form.username" type="text" placeholder="用户名">
-                </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="请输入验证码">
                         <template #prefix>
-                            <el-icon><EditPen /></el-icon>
+                            <el-icon><User /></el-icon>
                         </template>
                     </el-input>
-                </el-col>
+                </el-form-item>
-                <el-col :span="5">
+                <el-form-item prop="password">
-                    <el-button type="success">获取验证码</el-button>
+                    <el-input v-model="form.password" type="password" placeholder="密码">
-                </el-col>
+                        <template #prefix>
-            </el-row>
+                            <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>

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">
+        <div style="width: 400px;background-color: white;z-index: 1">
-            <transition name="el-fade-in-linear">
+            <router-view v-slot="{ Component }">
-                <router-view/>
+                <transition name="el-fade-in-linear">
-            </transition>
+                    <component :is="Component" />
+                </transition>
+            </router-view>
         </div>
     </div>
 </template>