feat: register reset beta / login almost done

src/components/GlobalHeader.vue

@@ -69,7 +69,7 @@ export default {
 <style scoped>
 #global-header-body {
   height: 64px;
-  width: 100vw;
+  width: 100%;
   position: sticky;
   top: 0;
   z-index: 999;

src/global/register-icon.js

@@ -1,6 +1,6 @@
-import { Lock, Phone, Plus } from "@element-plus/icons";
+import { Avatar, Cherry, Lock, Message, Phone, Plus } from "@element-plus/icons";
 
-const icons = [Phone, Lock, Plus];
+const icons = [Phone, Lock, Plus, Avatar, Cherry, Message];
 
 export default function (app) {
   Object.keys(icons).forEach((key) => {

src/views/AuthPage/components/AuthCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="auth-card-body">
     <h2 id="auth-card-title">{{ cardTitle }} </h2>
-    <el-form id="auth-card-form" :model="cardForm" :rules="cardRuleForm" ref="cardFormRef">
+    <el-form id="auth-card-form" ref="cardFormRef" :model="cardForm" :rules="cardRuleForm">
 
       <el-form-item v-if="cardType==='login'" class="auth-card-form-item" prop="phone">
         <el-input v-model="cardForm.phone" autofocus clearable oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号">
@@ -13,20 +13,38 @@
         </el-input>
       </el-form-item>
 
-      <el-form-item v-if="cardType==='register'" class="auth-card-form-item" prop="">
-        <el-input v-model="cardForm.name"></el-input>
+      <el-form-item v-if="cardType==='register'" class="auth-card-form-item" prop="name">
+        <el-input v-model="cardForm.name" autofocus clearable placeholder="请输入昵称，长度为1-20个字符">
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <cherry/>
+            </el-icon>
+          </template>
+        </el-input>
       </el-form-item>
 
-      <el-form-item v-if="cardType==='register'" class="auth-card-form-item">
-        <el-input v-model="cardForm.username"></el-input>
+      <el-form-item v-if="cardType==='register'" class="auth-card-form-item" prop="username">
+        <el-input v-model="cardForm.username" clearable placeholder="请输入用户名，只允许英文和数字，长度为1-20个字符">
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <avatar/>
+            </el-icon>
+          </template>
+        </el-input>
       </el-form-item>
 
-      <el-form-item v-if="cardType==='register'" class="auth-card-form-item">
-        <el-input v-model="cardForm.email"></el-input>
+      <el-form-item v-if="cardType==='register'" class="auth-card-form-item" prop="email">
+        <el-input v-model="cardForm.email" clearable placeholder="请输入邮箱">
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <message/>
+            </el-icon>
+          </template>
+        </el-input>
       </el-form-item>
 
       <el-form-item class="auth-card-form-item" prop="password">
-        <el-input v-model="cardForm.password" clearable placeholder="请输入密码" type="password">
+        <el-input v-model="cardForm.password" :placeholder="passwordPlaceHolder" clearable type="password">
           <template #prefix>
             <el-icon class="el-input__icon">
               <lock/>
@@ -35,12 +53,24 @@
         </el-input>
       </el-form-item>
 
-      <el-form-item v-if="cardType==='reset'||cardType==='register'" class="auth-card-form-item">
-        <el-input v-model="cardForm.passwordConfirm"></el-input>
+      <el-form-item v-if="cardType==='reset'||cardType==='register'" class="auth-card-form-item" prop="passwordConfirm">
+        <el-input v-model="cardForm.passwordConfirm" clearable placeholder="请再次输入密码" type="password">
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <lock/>
+            </el-icon>
+          </template>
+        </el-input>
       </el-form-item>
 
-      <el-form-item v-if="cardType==='reset'||cardType==='register'" class="auth-card-form-item">
-        <el-input v-model="cardForm.phone"></el-input>
+      <el-form-item v-if="cardType==='reset'||cardType==='register'" class="auth-card-form-item" prop="phone">
+        <el-input v-model="cardForm.phone" autofocus clearable oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号">
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <phone/>
+            </el-icon>
+          </template>
+        </el-input>
       </el-form-item>
 
       <el-form-item v-if="cardType==='reset'||cardType==='register'">
@@ -49,7 +79,7 @@
 
       <div v-if="cardType==='login'" id="auth-card-login-password-options">
         <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
-        <span id="auth-card-login-password-option-reset" @click="toResetType">找回密码</span>
+        <span id="auth-card-login-password-option-reset" @click="toResetType">重置密码</span>
       </div>
 
       <el-form-item v-if="cardType==='login'" class="auth-card-form-item">
@@ -69,13 +99,20 @@
 </template>
 
 <script>
-import { Lock, Phone } from "@element-plus/icons";
+import { Avatar, Cherry, Lock, Message, Phone } from "@element-plus/icons";
 import SlideVerifier from "@/views/AuthPage/components/SlideVerifier";
 
 export default {
   name: "AuthCard",
-  components: { SlideVerifier, Lock, Phone, },
+  components: { Message, Cherry, Avatar, SlideVerifier, Lock, Phone, },
   data() {
+    const passwordConfirmValidator = (rule, value, callback) => {
+      if (value !== this.cardForm.password) {
+        callback(new Error("请输入相同的密码"));
+      } else {
+        callback();
+      }
+    };
     return {
       cardType: "login",
       cardForm: {
@@ -89,17 +126,49 @@ export default {
       },
       cardRuleForm: {
         phone: [
+          { required: true, message: "请输入手机号", trigger: "blur" },
+          {
+            validator: function (rule, value, callback) {
+              if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(value) === false) {
+                callback(new Error("请输入正确格式的手机号"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur"
+          }
+        ],
+        name: [
           {
             required: true,
-            min: 11,
-            max: 11,
-            message: "请输入正确格式的手机号",
+            min: 1,
+            max: 20,
+            message: "请输入正确格式的昵称",
             trigger: "blur",
           }
         ],
-        name: [],
-        username: [],
-        email: [],
+        username: [
+          {
+            required: true,
+            min: 1,
+            max: 20,
+            message: "请输入正确格式的用户名",
+            trigger: "blur",
+          }
+        ],
+        email: [
+          { required: true, message: "请输入邮箱", trigger: "blur" },
+          {
+            validator: function (rule, value, callback) {
+              if (/^([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) === false) {
+                callback(new Error("请输入正确格式的邮箱"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur"
+          }
+        ],
         password: [
           {
             required: true,
@@ -108,12 +177,19 @@ export default {
           },
           {
             max: 20,
-            message: "输入过长",
+            message: "输入过多字符",
             trigger: "20",
           }
         ],
-        passwordConfirm: [],
+        passwordConfirm: [
+          { required: true, message: "请再次输入密码", trigger: "blur" },
+          {
+            validator: passwordConfirmValidator,
+            trigger: "blur"
+          }
+        ],
       },
+
       cardVerified: false,
 
       rememberPassword: false,
@@ -143,6 +219,16 @@ export default {
         return "err";
       }
     },
+
+    passwordPlaceHolder: function () {
+      if (this.cardType === "login") {
+        return "请输入密码";
+      } else if (this.cardType === "register" || this.cardType === "reset") {
+        return "请输入密码，只允许英文和数字，长度为8-20个字符";
+      } else {
+        return "err";
+      }
+    }
   },
 
   methods: {
@@ -158,10 +244,12 @@ export default {
 
     toResetType() {
       this.$refs.cardFormRef.resetFields();
+      this.cardVerified = false;
       this.cardType = "reset";
     },
     toOtherType() {
       this.$refs.cardFormRef.resetFields();
+      this.cardVerified = false;
       if (this.cardType === "login") {
         this.cardType = "register";
       } else if (this.cardType === "register") {
@@ -199,12 +287,12 @@ export default {
         });
       });
     },
-    handleRegister() {
-
-    },
-    handleReset() {
-
-    },
+    // handleRegister() {
+    //
+    // },
+    // handleReset() {
+    //
+    // },
 
     handleSlideVerifier(verifyStatus) {
       this.cardVerified = verifyStatus;