开箱即用——vue校验密码强度，带强度指示条

需求：
一、密码长度:
5 分: 小于等于 4 个字符， 10 分: 5 到 7 字符 ， 25 分: 大于等于 8 个字符
二、字母:
0 分: 没有字母， 10 分: 全都是小（大）写字母， 20 分: 大小写混合字母
三、数字:
0 分: 没有数字， 10 分: 1 个数字， 20 分: 大于等于 3 个数字
四、符号:
0 分: 没有符号， 10 分: 1 个符号， 25 分: 大于 1 个符号
五、奖励:
2 分: 字母和数字， 3 分: 字母、数字和符号， 5 分: 大小写字母、数字和符号
最后的评分标准:
= 90: 非常安全
= 80: 安全（Secure）
= 70: 非常强
= 60: 强（Strong）
= 50: 一般（Average）
= 25: 弱（Weak）
= 0: 非常弱

核心代码：按照需求判断字符串的强度

function checkPassword (str){
  // 第一步先判断各分类长度
  let num = 0;//数字
  let lowerCase = 0;//小写字母
  let upperCase = 0;//大写字母
  let special = 0;//特殊字符
  for (let i = 0; i < str. length; i++){
    let c = str.charCodeAt(i)
    if (c >= 48&& c <= 57){
      //数字
      num++;
    }else if (c >= 65 && c <= 90){
      //大写字母
      upperCase++;
    }else if (c = 97 && c <= 122){
      //小写字母
      lowerCase++;
    }else {
      special++;
    }
  }
  // 第二步 计算分数
  let wholeMark = 0
  let numMark = 0
  let caseMark = 0
  let specialMark = 0
  let reward = 0
  // 整长度分数
  if (str.length <= 4){
    wholeMark = 5
  }else if (str.length > 4 && str. length <=8){
    wholeMark = 10
  }else {
    wholeMark = 25
  }
  // 奖励分数
  if ((lowerCase || upperCase)&& num) {
    reward = 2
    if (special){
      reward = 3
      if (lowerCase && upperCase) {
        reward = 5
      }
    }
  }
  // 字母分数
  if (lowerCase || upperCase) {
    caseMark = 10
    if (lowerCase && upperCase){
      caseMark = 20
    }
  }
  // 数字分数
  if (num){
    numMark = 10
    if (num >= 3){
      numMark = 20
    }
  }
  // 符号分数
  if (special){
    specialMark = 10
    if (special > 1){
      specialMark = 25
    }
  }
  let totalMark = wholeMark + numMark + caseMark + specialMark + reward
  let strength = ''
  if (totalMark<25){ strength ='非常弱'
  }else if (totalMark >= 25 && totalMark < 50){strength ='弱'
  }else if (totalMark >= 50 && totalMark < 60){strength = '一般'
  }else if (totalMark >= 60 && totalMark < 70){strength ='强'
  }else if (totalMark >= 70 && totalMark < 80){strength = '非常强'
  }else if (totalMark >= 86 && totalMark < 90){strength = '安全'
  }else {strength ='非常安全'
  }
  return strength
}

执行测试：

借鉴博文：https://www.imooc.com/article/17470

• 下面是在页面上显示强度条的内容

html部分

<input value="password" @change="onPasswordChange"></input>

<div>
<span :class="(password &&(isOne||isTwo||isThree||isFour||isFive||isSix||isSeven))?'colorRed' : 'colorInit'"></span>
<span :class="(isTwo||isThree||isFour||isFive||isSix||isSeven)? 'colorRed : 'colorInit'"></span>
<span :class="(isThree||isFour||isFive||isSix||isSeven)? 'colorOrange ' : 'colorInit'"></span>
<span :class="(isFour||isFive|lissix||isSeven)? 'colorOrange' : 'colorInit'"></span>
<span :class="(isFive||isSix||isSeven)? 'colorGreen': 'colorInit'"></span>
<span :class="(isSix|| isSeven)? 'colorGreen' : 'colorInit'"></span>
<span :class="isSeven? 'colorSafe' : 'colorInit'"></span>
<span v-show="password" class="left5"> {{psdstrength}} </span>
</div>

method部分

onPasswordChange(val){
this.isOne = false
this.isTwo = false
this.isThree = false
this.isFour = false
this.isFive = false
this.isSix = false
this.isSeven = false
const psdVal = val.target.value
const psdStrength = checkPassword(psdVal)
this.psdstrength = psdStrength
switch (psdStrength){
  case '非常弱':
    this.is0ne = true
    break;
  case '弱':
    this.isTwo = true
  break;
  case '一般':
    this.isThree = true
    break;
  case '强':
    this.isFour = true
    break;
  case '非常强':
    this.isFive = true
    break;
  case '安全':
    this.isSix = true
    break;
  case '非常安全':
    this.isSeven = true
    break;
  default:
    break;
  }
}

css


借鉴网址：https://blog.csdn.net/libin_1/article/details/51577472

效果图