欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS实现密码弱中强显示

程序员文章站 2022-04-14 17:46:33
...
本文主要和大家分享JS实现密码弱中强显示,主要以代码的方式和大家分享,希望能帮助到大家。
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script>
        onload = function () {
            var tds = document.getElementById('tb').getElementsByTagName('td');


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


        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>
</head>
<body>
    <input type="text" name="name" id="txt" />
    <table id="tb" border="1" style="width:300px;height:35px;text-align:center;background-color:gray">
        <tr>
            <td>
                弱
            </td>
            <td>
                中
            </td>
            <td>
                强
            </td>


        </tr>
    </table>
</body>
</html>

相关推荐:

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

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

JavaScript 密码强度判断代码

以上就是JS实现密码弱中强显示的详细内容,更多请关注其它相关文章!