解润东

20220928

src/views/my/resetPas.vue

@@ -106,7 +106,7 @@ export default {
     },
     onSubmit(val) {
       // 判断level数组是否含有middle
-      let isMiddleLevel = this.level.includes('middle')
+      let isMiddleLevel = this.level.includes('high')
       if(!isMiddleLevel){
         this.$toast.fail("密码等级较低")
         return

src/views/my/resetPasTwo.vue

@@ -25,17 +25,32 @@
         type="password"
         name="newPassword"
         label="新密码"
+        @input="checkPassword()"
         placeholder="请输入新密码"
         :rules="[
           { required: true, message: '请填写密码' },
           {
-                        message: '密码必须大于6个字符小于20个字符',
+            message: '密码必须大于8个字符小于30个字符',
             validator: (val) => {
-                            return val['length'] >= 6 && val['length'] < 20;
+              return val['length'] >= 8 && val['length'] < 30;
             },
           },
         ]"
       />
+      <!-- 密码等级提示 -->
+      <van-cell-group>
+        <div class="intensity">
+          <div style="width: 8.2em;"></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"
@@ -46,9 +61,9 @@
         :rules="[
           { validator, required: true, message: '二次密码输入不一致' },
           {
-                        message: '密码必须大于等于6个字符小于20个字符',
+            message: '密码必须大于等于8个字符小于30个字符',
             validator: (val) => {
-                            return val['length'] >= 6 && val['length'] < 20;
+              return val['length'] >= 8 && val['length'] < 30;
             },
           },
         ]"
@@ -66,7 +81,6 @@
 <script>
 import LHeader from "@/components/header.vue";
 import { getFun, postFun } from "@/service/table.js";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
 import { getUserInfo } from "@/utils/userInfo";
 import { removeToken } from "@/utils/auth"; // get token from cookie
 export default {
@@ -80,6 +94,7 @@ export default {
         newPassword: "",
         confirm: "",
       },
+      level : []
     };
   },
   mounted() {
@@ -90,22 +105,26 @@ export default {
       return this.form.newPassword == val;
     },
     onSubmit(val) {
+      // 判断level数组是否含有middle
+      let isMiddleLevel = this.level.includes('high')
+      if(!isMiddleLevel){
+        this.$toast.fail("密码等级较低")
+        return
+      }
       this.$toast.loading({
         message: "请求中...",
         forbidClick: true,
         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("密码修改成功!");
           localStorage.setItem('pwd',encrypt(this.form.newPassword))
           this.$router.push('/save-workbench')
         }
-                })
+      });
     },
     obj2formdata(data) {
       console.log(data, "fasfasdfsd");
@@ -117,9 +136,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