JS实现密码弱中强显示

本文主要和大家分享JS实现密码弱中强显示，主要以代码的方式和大家分享，希望能帮助到大家。

nbsp;html>


    <meta>
    <title></title>
    <meta>
    <script>
        onload = function () {
            var tds = document.getElementById(&#39;tb&#39;).getElementsByTagName(&#39;td&#39;);


            document.getElementById(&#39;txt&#39;).onkeyup = function () {
                for (var i = 0; i < tds.length; i++) {//防止输入正确密码后倒退删除时候出问题
                    tds[i].style.backgroundColor = &#39;gray&#39;;
                }
                if (this.value.length>0) {
                    var result = checkPwd(this.value);
                    if (result<=1) {//弱
                        tds[0].style.backgroundColor=&#39;red&#39;;
                    }else if (result==2) {//中
                        tds[0].style.backgroundColor=&#39;green&#39;;
                        tds[1].style.backgroundColor=&#39;green&#39;;
    
                    }else if (result==3) {//强
                        tds[0].style.backgroundColor=&#39;blue&#39;;
                        tds[1].style.backgroundColor=&#39;blue&#39;;
                        tds[2].style.backgroundColor=&#39;blue&#39;;
                    }
                }
            }
        }


        function checkPwd(msg){ //判断含有数字字母特殊符号
            var lvl = 0;
            if (msg.match(/[0-9]/)){
                lvl++;
            }
            if (msg.match(/[a-zA-Z]/)) {
                lvl++;
            }
            if (msg.match(/[^0-9a-zA-Z]/)) {
                lvl++;
            }
            if (msg.length<6) {
                lvl--;
            }
            return lvl;
        }
    </script>
    <input>
    

                                                             

弱

中

强

相关推荐：

JS正则实现密码强度验证功能

两种JS实现密码强度的正则表达式方法

JavaScript 密码强度判断代码