js检查密码强弱方法

js 检查密码强弱方法

HTML 代码：

<form action="" autocomplete="off">
    <input type="password" name="" id="pawd" placeholder="密码"><img src="" alt=""><br>
    <p>数字字符字母区分密码强弱</p><span id="ruo" style="display:inline-block">弱</span><span id="zo" style="display:inline-block">中</span><span id="qiang" style="display:inline-block">强</span><br>
</form>

CSS 代码：

body {
    margin:0;
    padding:0;
    font-size:16px;
}
form {
    margin:0 auto;
    width:305px;
    transition:all 1s ease-out 0s;
}
input {
    font-size:16px;
    height:25px;
    width:280px;
    margin-top:20px;
    color:#333;
    outline:none;
    border-radius:5px;
    border:1px solid #ccc;
}
input:focus {
    border:1px solid #09f;
}
p {
    display:inline-block;
    font-size:12px;
    color:#ccc;
    margin:0;
    margin-right:6px;
}
span {
    display:none;
    width:42px;
    font-size:12px;
    margin-left:2px;
    color:#ccc;
    background:#ccc;
    text-align:center;
}
span.ruo {
    background:#f00;
    color:#fff;
    opacity:0.5;
}
span.zo {
    background:rgb(255,224,0);
    opacity:1;
    color:#fff;
}
span.qiang {
    background:rgb(3,146,3);
    color:#fff;
}

JS 代码：

var pawd = document.querySelector('#pawd');

var state = '弱'; //模拟密码强度判断
pawd.onkeyup = function() {

    var regStr = /[a-zA-Z]/; //所有字母
    var regNum = /[0-9]/; //所有数字
    var sup = /\W/; //所有非字母数字
    if (this.value.length >= 1) {

        ruo.style.display = "inline-block";
        ruo.className = "ruo";
        ruo.innerHTML = "弱";
        zo.style.display = "inline-block";
        zo.className = "";
        qiang.style.display = "inline-block";
        qiang.className = "";
        state = "弱";
    }
    var sn = this.value.length >= 1 && regStr.test(this.value) && regNum.test(this.value);
    var sp = this.value.length >= 1 && regStr.test(this.value) && sup.test(this.value);
    var np = this.value.length >= 1 && regNum.test(this.value) && sup.test(this.value);
    if (sn || sp || np) {
        ruo.className = "zo";
        ruo.innerHTML = " ";
        zo.className = "zo";
        zo.innerHTML = "中";
        state = "中";
    }
    if (this.value.length >= 1 && regStr.test(this.value) && regNum.test(this.value) && sup.test(this.value)) {
        ruo.className = "qiang";
        ruo.innerHTML = " ";
        zo.className = "qiang";
        zo.innerHTML = " ";
        qiang.className = "qiang";
        qiang.innerHTML = "强";
        state = "强";
    }
    if (this.value.length < 1) {
        ruo.style.display = "inline-block";
        ruo.className = "";
        ruo.innerHTML = "弱";
        zo.style.display = "inline-block";
        zo.className = "";
        qiang.style.display = "inline-block";
        qiang.className = "";
    }
}

以上关于js检查密码强弱方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。