@input="newpasswordchange" />
                    </el-form-item>
                    <el-form-item label="强度">
                        <div id="container" style="height: 200px; width: 200px;"></div>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="checkpassword">
                        <el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" />
                    </el-form-item>
                </el-form>

**js代码：**

##  **第三种方法、**


判断规则用了这个[密码强度判断规则（仿google）\_erice的博客-CSDN博客]( )


前面评分规则差不太多，后面评分等级作了修改：


小于10：密码强度不合格，10-25：弱，25-35：中，35以上：强


![](https://img-blog.csdnimg.cn/20210805110138974.gif)


**主要code：**

      <div class="passwordstrength">
        <div class="level1" :style="{'background-color':(score>=10&&score<25)?'#FC5F76':((score>=25&&score<35)?'#FF9900':(score>=35?'#33CC00':'#BBBBBB'))}"></div>
        <div class="level2" :style="{'background-color':((score>=25&&score<35)?'#FF9900':(score>=35?'#33CC00':'#BBBBBB'))}"></div>
        <div class="level3" :style="{'background-color':score>=35?'#33CC00':'#BBBBBB'}"></div>
      </div>
      <input type="password" placeholder="请输入您的密码" v-model="newpassword" maxlength="16" @input="passwordcomplex()" />

**注解：**


整体按照前面链接给出的判断规则来的，根据是否存在数字，是否存在大小写字母，是否存在特殊字符来进行打分，有连续的情况扣分，我还单独加了一个规则，如果整个密码都是连续的，分数直接扣为0。


接下来上js代码，函数返回的是最后的得分：

passwordcomplex(){
  let passwordscore = 0
  let pwdArr = this.newpassword.split('');
  console.log(pwdArr);
  // pwdLen长度
  if(pwdArr.length>4&&pwdArr.length<=7){  //长度在4-7之间，加五分
    passwordscore += 5
  }else if(pwdArr.length>7){  //长度在7以上，加10分
    passwordscore += 10
  }
  // letter字母
  if(pwdArr.some(item => {return /^[a-z]$/.test(item)})){  //是否存在小写字母
    if(pwdArr.some(item => {return /^[A-Z]$/.test(item)})){  //是否存在大写字母
      passwordscore += 10   //大小写都有，加10，否则加5
    }else{
      passwordscore += 5
    }
  }else if(pwdArr.some(item => {return /^[A-Z]$/.test(item)})){
    passwordscore += 5
  }
  //num数字
  if(pwdArr.some(item => {return /^[0-9]$/.test(item)})){ //判断是否存在数字
    let count = 0
    pwdArr.forEach(item => {   //判断数字出现的次数
      if(/^[0-9]$/.test(item)){
        count++
      }
    })
    if(count>=3){  //出现大于等于3次，加10，否则加5
      passwordscore += 10;
    }else{
      passwordscore += 5;
    }
  }
  //special特殊字符
  if(pwdArr.some(item => {return /^[\^%&'*.,;=+\-?@#!$\x22]$/.test(item)})){ //判断是否存在特殊字符
    let count = 0
    pwdArr.forEach(item => {  //特殊字符出现次数
      if(/^[\^%&'*.,;=+\-?@#!$\x22]$/.test(item)){
        count++
      }
    })
    console.log('count',count);
    if(count>=2){
      passwordscore += 15;  //出现两次以上加15，否则加5
    }else{
      passwordscore += 5;
    }
  }
  //是否连续
  let isContinued = false;
  let countinuedCount = 0;
  for(let i =0;i<pwdArr.length;i++){
    if(pwdArr[i+1]){
      if((pwdArr[i].charCodeAt(0)+1==pwdArr[i+1].charCodeAt(0))||(pwdArr[i].charCodeAt(0)-1==pwdArr[i+1].charCodeAt(0))){  //如果相邻两个字符连续
        isContinued = true;  //开始记录连续
        countinuedCount++    //记录连续次数
      }else{
        if(isContinued){
          isContinued = false;
          passwordscore -= countinuedCount   //结束当前连续时，分数扣掉连续次数
          countinuedCount = 0
        }
      }
    }
  }
  console.log(isContinued,countinuedCount);
  if(countinuedCount == pwdArr.length-1){
    passwordscore = 0   //如果整个密码连续，分数为0
  }else{
    passwordscore -= countinuedCount
  }
  if(pwdArr.length<8){  //需求规定的，密码必须大于8位
    passwordscore = 0
  }
  for(let i = 0;i<pwdArr.length;i++){  //如果整个密码由单一字符构成，分数为0
    if(i ==pwdArr.length-1){
      passwordscore = 0

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他