修改密码校验, 重发验证码倒计时

src/component/LoginPage/login/school.vue

@@ -200,10 +200,56 @@
         <div v-show="frogetPasswordStep === 3">
           <div class="forget_passored_form_content">
             <div class="forget_passored_form_title">Password</div>
+			<div v-show="passwordConditionShow" class="conditionShow">
+				<div class="item">
+					<div class="icon">
+					<i
+						v-show="!passwordCondition.length"
+						class="fi fi-br-cross-small"
+					></i>
+					<i
+						v-show="passwordCondition.length"
+						class="fi fi-br-check"
+					></i>
+					</div>
+					<div class="text">At least 8 characters long</div>
+				</div>
+				<div class="item">
+					<div class="icon">
+					<i
+						v-show="!passwordCondition.special"
+						class="fi fi-br-cross-small"
+					></i>
+					<i
+						v-show="passwordCondition.special"
+						class="fi fi-br-check"
+					></i>
+					</div>
+					<div class="text">Must contain special characters</div>
+				</div>
+				<div class="item">
+					<div class="icon">
+					<i
+						v-show="!passwordCondition.group"
+						class="fi fi-br-cross-small"
+					></i>
+					<i
+						v-show="passwordCondition.group"
+						class="fi fi-br-check"
+					></i>
+					</div>
+					<div class="text">
+					Mix of uppercase, lowercase and numbers
+					</div>
+				</div>
+			</div>
             <input
               class="forget_passored_form_input"
               placeholder="Enter a new password"
               v-model="newPassword"
+			  @focus="() => (passwordConditionShow = true)"
+			@blur="() => (passwordConditionShow = false)"
+				@input="passwordInput"
               @keydown.enter="submitResetPassword()"
             />
           </div>
@@ -315,6 +361,12 @@ export default defineComponent({
       loginTime: true,
 	  animation: false,
 	  inputCodeTime: null as any,
+	  passwordConditionShow:false,
+	  passwordCondition: {
+        length: false,
+        special: false,
+        group: false,
+      },
     };
   },
   onBeforeUnmount() {
@@ -572,9 +624,26 @@ export default defineComponent({
         sessionStorage.setItem("sessionId", randomNum);
         sessionStorage.setItem("record", JSON.stringify([]));
       }
+    },
+	passwordInput(e) {
+      this.isPassword(this.newPassword);
+    },
+	isPassword(password: any) {
+      this.passwordCondition.length = /.{8,}/.test(password);
+      this.passwordCondition.special =
+        /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
+      this.passwordCondition.group =
+        /[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password);
+      return Object.values(this.passwordCondition).filter(
+        (value) => value === true
+      ).length;
     },
     //修改密码提交
     submitResetPassword() {
+		if (this.isPassword(this.newPassword) < 3) {
+          message.info("You must satisfy ALL password conditions to register.");
+          return;
+        }
       let data = {
         email: this.forgetPasswordEmail,
         emailVerifyCode: this.forgetEmailValue,
@@ -591,6 +660,8 @@ export default defineComponent({
 
    //创建定时器
     createTimer() {
+      clearInterval(this.timer);
+	  this.time = 60;
       this.timer = setInterval(() => {
         this.time--;
         if (this.time <= 0) this.clearTimer(0);
@@ -643,6 +714,36 @@ export default defineComponent({
 .login_page {
   width: 100%;
   height: 100%;
+   .conditionShow {
+		bottom: 0;
+		position: absolute;
+		right: 0;
+		left: auto;
+		transform: translateY(-5rem);
+		background: #404040;
+		color: #fff;
+		font-size: 1.4rem;
+		padding: 2rem;
+		border-radius: 2rem;
+		z-index: 2;
+		> .item {
+			display: flex;
+			align-items: center;
+			margin-bottom: 0.5rem;
+			&:last-child {
+			margin-bottom: 0;
+			}
+			> .icon {
+			margin-right: 1rem;
+			i {
+				display: flex;
+				// &.fi-br-cross-small{
+				// 	color: red;
+				// }
+			}
+			}
+		}
+	}
   .page_content {
     .login_content {
       margin: 0 auto;