修改密码加入低中高强度校验

src/views/my/resetPas.vue

@@ -25,6 +25,7 @@
         type="password"
         name="newPassword"
         label="新密码"
+        @input="checkPassword()"
         placeholder="请输入新密码"
         :rules="[
           { required: true, message: '请填写密码' },
@@ -36,6 +37,20 @@
           },
         ]"
       />
+      <!-- 密码等级提示 -->
+      <van-cell-group>
+        <div class="intensity">
+          <div style="width: 8.2em; margin-right: 0.32rem;"></div>
+          <div>
+            <div class="pass-level">
+                <span class="psdText">密码强度</span>
+                <span class="line" :class="[level.includes('low') ? 'low' : '']"></span>
+                <span class="line" :class="[level.includes('middle') ? 'middle' : '']" ></span>
+                <span class="line" :class="[level.includes('high') ? 'high' : '']" ></span>
+            </div>
+          </div>
+        </div>
+      </van-cell-group>
       <van-field
         required
         v-model="form.confirm"
@@ -79,6 +94,7 @@ export default {
         newPassword: "",
         confirm: "",
       },
+      level : []
     };
   },
   mounted() {
@@ -95,14 +111,13 @@ export default {
         loadingType: "spinner",
         duration: 0,
       });
-            postFun("/mobile/resetPwd", this.obj2formdata(val))
-                .then((data) => {
+      postFun("/mobile/resetPwd", this.obj2formdata(val)).then((data) => {
         if (data.code == 0) {
           this.$toast.clear();
-                        this.$toast.success('密码修改成功!');
-                        this.$router.back()
+          this.$toast.success("密码修改成功!");
+          this.$router.back();
         }
-                })
+      });
     },
     obj2formdata(data) {
       console.log(data, "fasfasdfsd");
@@ -114,9 +129,82 @@ export default {
       }
       return fd;
     },
+
+    // 密码等级校验
+    checkPassword() {
+      this.level = [];
+      // 校验是数字
+      const regex1 = /^\d+$/;
+      // 校验字母
+      const regex2 = /^[A-Za-z]+$/;
+      // 校验符号
+      const regex3 =
+        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/;
+
+      if (regex1.test(this.form.newPassword)) {
+        this.level.push("low");
+      } else if (regex2.test(this.form.newPassword)) {
+        this.level.push("low");
+      } else if (regex3.test(this.form.newPassword)) {
+        this.level.push("low");
+      } else if (/^[A-Za-z\d]+$/.test(this.form.newPassword)) {
+        this.level.push("low");
+        this.level.push("middle");
+      } else if (
+        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
+          this.form.newPassword
+        )
+      ) {
+        this.level.push("low");
+        this.level.push("middle");
+      } else if (
+        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
+          this.form.newPassword
+        )
+      ) {
+        this.level.push("low");
+        this.level.push("middle");
+      } else if (
+        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
+          this.form.newPassword
+        )
+      ) {
+        this.level.push("low");
+        this.level.push("middle");
+        this.level.push("high");
+      }
+    },
   },
 };
 </script>
 
-<style>
+<style lang="less" scoped>
+.intensity {
+  display: flex;
+  padding: 0.26667rem 0.42667rem;
+  line-height: 0.64rem;
+	.psdText {
+		font-size: 14px;
+		margin-right: 10px;
+	}
+
+	.line {
+		display: inline-block;
+		width: 48px;
+		height: 4px;
+		background: #d8d8d8;
+		border-radius: 3px;
+		margin-right: 8px;
+	}
+	.low {
+		background: #f4664a;
+	}
+	.middle {
+		background: #ffb700;
+	}
+	.high {
+		background: #2cbb79;
+	}
+}
+
 </style>
\ No newline at end of file