密码强度

src/api.js

 import { Loading } from 'element-ui'
 
 var ApiConfig = {
-    baseLink: "http://115.159.142.32:8068/",
+    //baseLink: "http://115.159.142.32:8068/",
     //baseLink: "http://localhost:58947/",
-    //baseLink: "http://10.126.226.37:8070/",
+    baseLink: "http://10.126.226.37:8070/",
     //baseLink: "http://10.96.0.2:8070/",
     Link: {
         uploadFile: "UploadFile",

src/components/Authorization/ChangeAuthor/ChangeAuthor.vue

@@ -52,7 +52,7 @@
         </div>
       </el-col>
     </el-row>
-  
+
     <!--创建用户-->
     <el-dialog title="创建用户" :visible.sync="ShowAddUser" size="tiny">
       <el-form label-width="100px" style="margin-left: 20px;margin-top: 20px;">
@@ -60,7 +60,13 @@
           <el-input v-model="UserModel.LoginName"></el-input>
         </el-form-item>
         <el-form-item label="密码 :">
-          <el-input v-model="UserModel.password" :disabled="UserModel.UserID!=0"></el-input>
+          <el-input v-model="UserModel.password" :disabled="UserModel.UserID!=0" @input="passwordCheck" maxlength="16" placeholder="请输入6-16位数字，字母，符号的组合密码"></el-input>
+          <div id="tips">
+            <span class="tips-item" :class="(userRegPwdLevel === 1) ? 's1' : ''">弱</span>
+            <span class="tips-item" :class="(userRegPwdLevel === 2) ? 's2' : ''">中</span>
+            <span class="tips-item" :class="(userRegPwdLevel === 3) ? 's3' : ''">强</span>
+            <span class="tips-item" :class="(userRegPwdLevel === 4) ? 's4' : ''">很强</span>
+          </div>
         </el-form-item>
         <el-form-item label="角色名称 :" align="left">
           <template>
@@ -76,9 +82,9 @@
       </el-form>
       <el-button type="primary" @click="commitUser()">确认</el-button>
       <el-button type="primary" @click="ShowAddUser=false">取消</el-button>
-  
+
     </el-dialog>
-  
+
     <!--重设密码-->
     <el-dialog title="重设密码" :visible.sync="ShowResetPwd" size="200">
       <el-form ref="Reform" style="margin-left: 20px;margin-top: 20px;">
@@ -89,7 +95,7 @@
       <el-button type="primary" @click="ResetPwd()">确认</el-button>
       <el-button type="primary" @click="ShowResetPwd=false">取消</el-button>
     </el-dialog>
-  
+
     <!--查看权限-->
     <el-dialog title="查看权限" :visible.sync="ShowUserRight">
       <el-form ref="Powerform" label-width="100px" style="margin-left: 20px;margin-top: 20px;">
@@ -153,6 +159,7 @@ export default {
       UpdateUserShow: false,
       DeleteUserShow: false,
       ResetPwdShow: false,
+      userRegPwdLevel: 0, //用户注册密码强度
     }
   },
   methods: {
@@ -292,6 +299,11 @@ export default {
 
     createUser() {
       var that = this;
+      if(this.userRegPwdLevel<3)
+      {
+        alert('密码强度不够，请重新填写6-16位数字，字线与字符的组合')
+        return;
+      }
       this.ApiFun.account.CreateUser({
         data: that.UserModel,
         success: function (data) {
@@ -460,6 +472,36 @@ export default {
         }
       })
     },
+
+
+    passwordCheck() {
+      // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
+      // 3： 表示第四个级别 4：表示第五个级别
+      let modes = 0;
+      if(this.UserModel.password.length < 6){       //最初级别
+        this.userRegPwdLevel = 1;
+        return false;
+      }
+      if(/\d/.test(this.UserModel.password)){       //如果用户输入的密码 包含了数字
+        modes++;
+      }
+      if(/[a-z]/.test(this.UserModel.password)){    //如果用户输入的密码 包含了小写的a到z
+        modes++;
+      }
+      if(/[A-Z]/.test(this.UserModel.password)){    //如果用户输入的密码 包含了大写的A到Z
+        modes++;
+      }
+      if(/\W/.test(this.UserModel.password)){       //如果是非数字 字母 下划线
+        modes++;
+      }
+      switch(modes){
+        case 1 : { this.userRegPwdLevel = 1; break; }
+        case 2 : { this.userRegPwdLevel = 2; break; }
+        case 3 : { this.userRegPwdLevel = 3; break; }
+        case 4 : { this.userRegPwdLevel = 4; break; }
+      }
+    },
+
   },
   created: function () {
     this.searchUser();
@@ -542,4 +584,52 @@ export default {
   margin-top: 20px;
   text-align: right;
 }
+
+#tips{
+  font-size: 12px;
+  height: 15px;
+  display: inline-block;
+  width: auto;
+  margin: 0 0 0 60px;
+  }
+
+  #tips span .word {
+    float: left;
+    width: 130px;
+    height: 20px;
+    color: #fff;
+    overflow:hidden;
+    margin-right: 10px;
+    background: #D7D9DD;
+    line-height:20px;
+    text-align: center;
+  }
+
+  #tips span {
+    float: left;
+    width: 40px;
+    height: 20px;
+    color: #fff;
+    overflow:hidden;
+    margin-right: 10px;
+    background: #D7D9DD;
+    line-height:20px;
+    text-align: center;
+  }
+
+  #tips  .s1 {
+    background: #F45A68;
+  }
+
+  #tips .s2 {
+    background: #fc0;
+  }
+
+  #tips .s3 {
+    background: #cc0;
+  }
+
+  #tips  .s4 {
+    background: #14B12F;
+  }
 </style>

src/components/Dashboard/Dashboard.vue

@@ -6,7 +6,7 @@
           <el-menu theme="dark" class="el-menu-demo" mode="horizontal">
             <span class="ComTiMenu ComTiMenu-name">GoMax</span>
             <span class="ComTiMenu ComTiMenuright ComTiMenurightLast" @click="logout">【退出】</span>
-  
+
             <span class="ComTiMenu ComTiMenuright" @click="modifyPassword = true">【修改密码】</span>
             <span class="ComTiMenu ComTiMenuright"> &nbsp;&nbsp;{{loginName}}</span>
             <span class="ComTiMenu ComTiMenuright">欢迎您 : </span>
@@ -24,7 +24,7 @@
                 <el-menu-item :index="func.url" v-for="func in cate.functions" :key="func.id">{{func.functionName}}</el-menu-item>
               </el-submenu>
             </div>
-  
+
           </el-menu>
         </el-col>
         <el-col :span="21" class="content_right">
@@ -48,7 +48,13 @@
           <el-input type="password" v-model="ruleForm2.oldPass" auto-complete="off"></el-input>
         </el-form-item>
         <el-form-item label="新密码" prop="newPass">
-          <el-input type="password" v-model="ruleForm2.newPass" auto-complete="off"></el-input>
+          <el-input type="password" v-model="ruleForm2.newPass" auto-complete="off" @input="passwordCheck" maxlength="16" placeholder="请输入6-16位数字，字母，符号的组合密码"></el-input>
+          <div id="tips">
+            <span class="tips-item" :class="(userRegPwdLevel === 1) ? 's1' : ''">弱</span>
+            <span class="tips-item" :class="(userRegPwdLevel === 2) ? 's2' : ''">中</span>
+            <span class="tips-item" :class="(userRegPwdLevel === 3) ? 's3' : ''">强</span>
+            <span class="tips-item" :class="(userRegPwdLevel === 4) ? 's4' : ''">很强</span>
+          </div>
         </el-form-item>
         <el-form-item label="确认密码" prop="checkPass">
           <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" @keyup.enter.native="submitForm"></el-input>
@@ -59,7 +65,7 @@
         </el-form-item>
       </el-form>
     </el-dialog>
-  
+
     <el-dialog :visible.sync="showNoClientPos">
       <el-row>
         <el-table ref="multipleTable" :data="NoClientPosList" border tooltip-effect="dark" style="width: 100%;">
@@ -122,7 +128,8 @@ export default {
       },
       FunctionList: [],
       showNoClientPos: false,
-      NoClientPosList: []
+      NoClientPosList: [],
+      userRegPwdLevel: 0, //用户注册密码强度
     }
   },
   methods: {
@@ -159,6 +166,11 @@ export default {
     },
 
     submitForm: function () {
+      if(this.userRegPwdLevel<3)
+      {
+        alert('密码强度不够，请重新填写6-16位数字，字线与字符的组合')
+        return;
+      }
       this.$refs.ruleForm2.validate((valid) => {
         if (valid) {
           var modifyParams = {
@@ -180,7 +192,35 @@ export default {
           return false;
         }
       });
-    }
+    },
+
+    passwordCheck() {
+      // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
+      // 3： 表示第四个级别 4：表示第五个级别
+      let modes = 0;
+      if(this.ruleForm2.newPass.length < 6){       //最初级别
+        this.userRegPwdLevel = 1;
+        return false;
+      }
+      if(/\d/.test(this.ruleForm2.newPass)){       //如果用户输入的密码 包含了数字
+        modes++;
+      }
+      if(/[a-z]/.test(this.ruleForm2.newPass)){    //如果用户输入的密码 包含了小写的a到z
+        modes++;
+      }
+      if(/[A-Z]/.test(this.ruleForm2.newPass)){    //如果用户输入的密码 包含了大写的A到Z
+        modes++;
+      }
+      if(/\W/.test(this.ruleForm2.newPass)){       //如果是非数字 字母 下划线
+        modes++;
+      }
+      switch(modes){
+        case 1 : { this.userRegPwdLevel = 1; break; }
+        case 2 : { this.userRegPwdLevel = 2; break; }
+        case 3 : { this.userRegPwdLevel = 3; break; }
+        case 4 : { this.userRegPwdLevel = 4; break; }
+      }
+    },
   },
   created: function () {
     this.loginName = this.$route.query.loginName;
@@ -516,4 +556,32 @@ body {
   line-height: 1;
   padding-top: 10px;
 }
+
+#tips span {
+  float: left;
+  width: 40px;
+  height: 20px;
+  color: #fff;
+  overflow:hidden;
+  margin-right: 10px;
+  background: #D7D9DD;
+  line-height:20px;
+  text-align: center;
+}
+
+#tips  .s1 {
+  background: #F45A68;
+}
+
+#tips .s2 {
+  background: #fc0;
+}
+
+#tips .s3 {
+  background: #cc0;
+}
+
+#tips  .s4 {
+  background: #14B12F;
+}
 </style>