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

代码如下：

html:

      <el-form-item>
        <div class="input_span">
          <span :style="{'background-color':(msgText > 1 || msgText == 1) ?  '#FC5F76' : '#BBBBBB', 'color': (msgText > 1 || msgText == 1) ?  '#FC5F76' : '#BBBBBB' }">弱</span>
          <span :style="{'background-color':(msgText > 2 || msgText == 2) ?  '#FF9900' : '#BBBBBB', 'color': (msgText > 2 || msgText == 2) ?  '#FF9900' : '#BBBBBB'}">中</span>
          <span :style="{'background-color':(msgText > 4 || msgText == 4) ?  '#33CC00' : '#BBBBBB', 'color': (msgText > 4 || msgText == 4) ?  '#33CC00' : '#BBBBBB'}">强</span>
        </div>
      </el-form-item>

js :

data(){
 return {
      msgText: "",
    }
},
methods: {
    checkStrong(sValue) {
      var modes = 0;
      //正则表达式验证符合要求的
      if (sValue.length < 1) return modes;
      if (/\d/.test(sValue)) modes++; //数字
      if (/[a-z]/.test(sValue)) modes++; //小写
      if (/[A-Z]/.test(sValue)) modes++; //大写
      if (/\W/.test(sValue)) modes++; //特殊字符
      // console.log("modes:", sValue.length, modes)
      //逻辑处理
      switch (modes) {
        case 1:
          return 1;
          break;
        case 2:
          return 2;
          break;
        case 3:
        case 4:
        return sValue.length < 4 ? 3 : 4;
        break;
      }
      return modes;
    }
},

watch: {
    'loginForm.password': {
      handler(keyWord, oldname) {
        // console.log("keyWord:", keyWord)
        this.msgText = this.checkStrong(keyWord);
      }
    }
  },
  created() {
    if (this.loginForm.password){
      this.msgText = this.checkStrong(this.loginForm.password);
    }
  },

css：

.input_span{
  height: 8px;
  display: flex;
  float: right;
  width: 35%;
  span{
    display: inline-block;
    width: 30%;
    border-radius: 8px;
    margin-right: 3px;
    text-align: center;
    margin-top: 3px;
  }
}

第二种方法、

这种使用了g2plot，所以使用时需要先安装 安装方式：npm install @antv/g2plot

主要代码：

<el-form ref="form" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="原密码" prop="password">
                            <el-input v-model="form.password" type="password" placeholder="请输入原密码" />
                        </el-form-item>
                        <el-form-item label="新密码" prop="newpassword">
                            <el-input v-model="form.newpassword" type="password" placeholder="请输入原密码"
                                @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代码：

<script>
    import { Gauge } from '@antv/g2plot';
    export default {
        data() {
            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;


### 最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![名不虚传！字节技术官甩出的"保姆级"数据结构与算法笔记太香了](https://img-blog.csdnimg.cn/img_convert/a3e940acdcd55765852a8bfe54482664.png)