网页中密码强度验证原理。

哈哈，只是简单的原理（代码可能不是这样写的），明白原理就好～～～～～
<body >
</body>
</html>
<script type="text/javascript">
    var Detection = function () {
        var pwd = document.getElementById('pwd').value;
         DIV = document.getElementById('TBDIV'),
        //DIV.innerHTML = '';
         TB=document.getElementById('pwdStrong'),
         TDS = TB.getElementsByTagName('td'),
         len = TDS.length;
        for (var i = 0; i < len; i++) {
            TDS[i].style.backgroundColor = 'silver';
        }

        var regFigure = /^\d+$/;
         figure = regFigure.test(pwd),
         regLetter = /^[A-Za-z]+$/,
         letter = regLetter.test(pwd),
        //var regAlphanumeric =/^\w{1,6}$/;下划线记录在特殊字符中
        //var alphanumeric = regAlphanumeric.test(pwd);

          regAlphanumericMore = /^[A-Za-z0-9]+$/,
          alphanumericmore = regAlphanumericMore.test(pwd),

          regSpecialCharacter = /[^A-Za-z0-9]+/,//不适用\W
          specialCharecter = pwd.match(regSpecialCharacter);

        if (pwd.length >= 6 && pwd.length <= 16) {
           // DIV.appendChild(TB);
            DIV.style.display = 'block';
            if (figure || letter) {//全数字或字母并且长度小于是6位：弱
                TDS[0].style.backgroundColor = 'red';
            } else if (specialCharecter) {//大于6位包含特殊字符：强
                TDS[0].style.backgroundColor = 'green';
                TDS[1].style.backgroundColor = 'green';
                TDS[2].style.backgroundColor = 'green';
            } else if (regAlphanumericMore) {//大于6位并且不包含特殊字符：中
                TDS[0].style.backgroundColor = 'yellow';
                TDS[1].style.backgroundColor = 'yellow';
            }
        } else {
            DIV.style.display = 'none';
           // DIV.innerHTML = '<strong>密码长度应为6~16个字符</strong>';
        }
    };
    var arrInfo = ['弱', '中', '强'],
     pwdPlease = '请输入密码:';
    window.onload = function () {
        var stron = document.createElement('strong');
        stron.innerText = pwdPlease;
        var txt = document.createElement('input');
        txt.id = 'pwd';
        txt.onkeyup = Detection;
        var TB = document.createElement('table');
        TB.border = 1;
        TB.style.position = 'absolute';
        TB.style.top = '40px';
        TB.style.left = '103px';
        TB.style.width = '155px';
        TB.id = 'pwdStrong';
        var TR = TB.insertRow(-1);
        for (var i = 0; i < 3; i++) {
            var TD = TR.insertCell(-1);
            TD.innerText = arrInfo[i];
            //TR.appendChild(TD);
            TD.style.backgroundColor = 'silver';
            TD.align = 'center';
            TD.id = i;
        }
        var DIV = document.createElement('div');
        DIV.id = 'TBDIV';
        DIV.style.display = 'none';
        DIV.appendChild(TB);
        document.body.appendChild(stron);
        document.body.appendChild(txt);
        document.body.appendChild(DIV);
    };
</script>
百度浏览器效果图：
posted @ 2014-02-15 01:54 wjshan0808 阅读(656) 评论(0) 收藏举报
刷新页面返回顶部