vue elment-ui 密码强度提示的两种方式_elenemt ui密码输入显示强中弱

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

        const validatePassword = (rule, value, callback) => {
            if (value !== this.form.newpassword) {
                callback(new Error('请确认新密码'))
            } else {
                callback()
            }
        }
        return {
            num: 0,
            gauge:null,
            form: {
                password: '',
                newpassword: "",
                checkpassword: ''
            },
            rules: {
                password: [{
                    required: true,
                    message: '请输入原密码',
                    trigger: 'blur'
                }],
                newpassword: [{
                        required: true,
                        message: '请输入新密码',
                        trigger: 'blur'
                    },
                    {
                        min: 3,
                        max: 18,
                        trigger: 'blur',
                        message: '密码长度为3到18位'
                    }
                ],
                checkpassword: [{
                        required: true,
                        message: '请输入新密码',
                        trigger: 'blur'
                    },
                    {
                        validator: validatePassword
                    }
                ]
            }
        }
    },
    mounted() {
        const ticks = [0, 1 / 3, 2 / 3, 1];
        const color = ['#F4664A', '#FAAD14', '#30BF78'];
        this.gauge = new Gauge('container', {
          percent: this.num,
          innerRadius: 0.75,
          type: 'meter',
          // 自定义 meter 总步数 以及 step 占比
          meter: {
            steps: 100,
                stepRatio: 1,
          },
          range: {
            ticks: [0, 1],
            color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
          },
          indicator: {
            pointer: {
              style: {
                stroke: '#D0D0D0',
              },
            },
            pin: {
              style: {
                stroke: '#D0D0D0',
              },
            },
          },
          statistic: {
            title: {
              formatter: ({ percent }) => {
                if (percent < ticks[1]) {
                  return '弱';
                }
                if (percent < ticks[2]) {
                  return '中';
                }
                return '优';
              },
              style: ({ percent }) => {
                return {
                  fontSize: '20px',
                  lineHeight: 1,
                  color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
                };
              },
            },
            content: {
              offsetY: 36,
              style: {
                fontSize: '24px',
                color: '#4B535E',
              },
              formatter: () => '密码强度',
            },
          },
        });

        this.gauge.render();
    },
    methods: {
        checkStrong(value) {
            let q = 0;
            let flag = false;
            let lowerNum = 0;
            for (let i in value) {
                var asc = value.charCodeAt(i);
                if ((asc >= 97 && asc <= 122)) {
                    if (!flag) {
                        q = q + 1;
                        flag = true;
                    }
                    lowerNum = lowerNum + 1;
                }
            }
            flag = false;
            let upperNum = 0;
            for (let i in value) {
                var asc = value.charCodeAt(i);
                if ((asc >= 65 && asc <= 90)) {
                    if (!flag) {
                        q = q + 1;
                        flag = true;
                    }
                    upperNum = upperNum + 1;
                }
            }
            flag = false;
            let numberNum = 0;
            for (let i in value) {
                var asc = value.charCodeAt(i);
                if ((asc >= 48 && asc <= 57)) {
                    if (!flag) {
                        q = q + 1;
                        flag = true;
                    }
                    numberNum = numberNum + 1;
                }
            }
            flag = false;
            let otherNum = 0;
            for (let i in value) {
                var asc = value.charCodeAt(i);
                if (!(asc >= 48 && asc <= 57 || asc >= 65 && asc <= 90 || asc >= 97 && asc <= 122)) {
                    if (!flag) {
                        q = q + 1;
                        flag = true;
                    }
                    otherNum = otherNum + 1;
                }
            }
            let rate = 0;
            let num = 0;
            switch (q) {
                case 1:
                    num = 0;rate=33/20;
                    break;
                case 2:
                    num =33;rate=50/20;
                    break;
                case 3:
                    num =50;rate=66/20;
                    break;
                case 4:
                    num = 66;rate=100/20;
                    break;
            }


            num = (num + ((lowerNum + upperNum + numberNum + otherNum) *rate )) / 100;
            switch (q) {
                case 1:
                    num > 0.33 ? num = 0.33 : num = num;
                    break;
                case 2:
                    num > 0.50 ? num = 0.50 : num < 0.34 ? num = 0.34 : num = num;
                    break;
                case 3:
                    num > 0.66 ? num = 0.66 : num < 0.51 ? num = 0.51 : num = num;
                    break;
                case 4:
                    num > 1 ? num = 1 : num < 0.67 ? num = 0.67 : num = num;
                    break;
            }
            return num
        },
        newpasswordchange(e) {
            this.num = this.checkStrong(e)
            this.gauge.changeData(this.num);
        },
    }
}

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


判断规则用了这个[密码强度判断规则（仿google）\_erice的博客-CSDN博客](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


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


小于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;

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux