这篇文章主要介绍了JS实现的四级密码强度检测功能,具有实时检测输入密码强度的功能,涉及javascript针对字符串的正则判定相关操作技巧,需要的朋友可以参考下

Dom部分

<label>
    <span>密码</span>
    <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>
</label>
<el-input v-model="userRegData.password" placeholder="请输入密码" autocomplete="off" show-password @input="passwordCheck"></el-input>

Vue部分

data() {
    return {
         userRegData: {              //注册表单
             password: '',
         },
         userRegPwdLevel: 0,         //用户注册密码强度
    }
}，

methods: {
        passwordCheck() {

            // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
            // 3： 表示第四个级别 4：表示第五个级别

            let modes = 0;
            if(this.userRegData.password.length < 6){       //最初级别
                this.userRegPwdLevel = 0;
                return false;
            }
            if(/\d/.test(this.userRegData.password)){       //如果用户输入的密码 包含了数字
                modes++;
            }
            if(/[a-z]/.test(this.userRegData.password)){    //如果用户输入的密码 包含了小写的a到z
                modes++;
            }
            if(/[A-Z]/.test(this.userRegData.password)){    //如果用户输入的密码 包含了大写的A到Z
                modes++;
            }
            if(/\W/.test(this.userRegData.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; }
            }
        },
}

less部分

#tips{

    font-size: 12px;
    height: 15px;
    display: inline-block;
    width: auto;
    margin: 0 0 0 60px;

    span {
        float: left;
        width: 40px;
        height: 20px;
        color: #fff;
        overflow:hidden;
        margin-right: 10px;
        background: #D7D9DD;
        line-height:20px;
        text-align: center;
    }

    .s1 {
        background: #F45A68;
    }

    .s2 {
        background: #fc0;
    }

    .s3 {
        background: #cc0;
    }

    .s4 {
        background: #14B12F;
    }
}

本文参考自：https://www.jb51.net/article/113524.htm