当前位置：Gxlcms > JavaScript > JS实现密码弱中强显示

JS实现密码弱中强显示

时间：2021-07-01 10:21:17 帮助过：6人阅读

本文主要和大家分享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实现密码弱中强显示

人气教程排行