JS判断密码强弱

首次发布:2017-08-27 22:35
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        #tab1 tr td{
            width:80px;
            text-align:center;
            background-color:gray;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var grade = 0;
            document.getElementById('pwd').onkeyup = function () {
                var txtPwd = document.getElementById('pwd').value;
                jiangdu(txtPwd);
                var tds = document.getElementById('tab1').getElementsByTagName('td');
                for (var i = 0; i < tds.length; i++) {
                    tds[i].style.backgroundColor = 'gray';
                }
                switch (grade) {
                    case 1:
                        tds[0].style.backgroundColor = 'red';
                        break;
                    case 2:
                        tds[0].style.backgroundColor = 'yellow';
                        tds[1].style.backgroundColor = 'yellow';
                        break;
                    case 3:
                        tds[0].style.backgroundColor = 'blue';
                        tds[1].style.backgroundColor = 'blue';
                        tds[2].style.backgroundColor = 'blue';
                        break;
                }
            }
            function jiangdu(userPwd) {
                grade = 0;
                if (userPwd.match(/\d+/)) {
                    grade++;
                }
                if (userPwd.match(/[a-z]+/)) {
                    grade++
                }
                if (userPwd.match(/[A-Z]+/)) {
                    grade++
                }
            }

        }
    </script>
</head>
<body>
    请输入密码:<input type="text" id="pwd" />
    
    <table id="tab1">
        <tr>
            <td>弱</td>
            <td>中</td>
            <td>强</td>
        </tr>
    </table>
    <p>只做了简单判断同时包括数字、大小写为强</p>
</body>
</html>