JavaScript实现密码强度验证

来源:互联网 发布:工作室源码 编辑:程序博客网 时间:2024/04/30 03:30
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8" />    <title>密码强度</title>    <style type="text/css">        #passStrength {            height: 6px;            width: 120px;            border: 1px solid #ccc;            padding: 2px;        }        .strengthLv1 {            background: red;            height: 6px;            width: 40px;        }        .strengthLv2 {            background: orange;            height: 6px;            width: 80px;        }        .strengthLv3 {            background: green;            height: 6px;            width: 120px;        }    </style>    <script type="text/javascript">        window.onload = function ()        {                        new PassworStrength("passStrength","pass");            function PassworStrength(passStrength,pass)            {                                this.init = function(passStrength)                {                                        var tempStrongDiv = document.createElement("div");                    var tempPasswordStrengthLevel = document.createElement("strong");                    var passStrengthDiv = document.getElementById(passStrength);                    this.strongDiv = passStrengthDiv.appendChild(tempStrongDiv);                    this.passwordStrengthLevelDiv = passStrengthDiv.parentNode.appendChild(tempPasswordStrengthLevel);                                    }                                this.checkPasswordStrength = function (password)                {                    var strengthText = ["低", "低", "中", "高"];                    var strengthLevel = 0;                    if (/[a-zA-Z]/.test(password))                    {                        strengthLevel++;                    }                    if (/[0-9]/.test(password))                    {                        strengthLevel++;                    }                    if (/[^a-zA-Z0-9]/.test(password))                    {                        strengthLevel++;                    }                                        if (password.length <= 6)                    {                        strengthLevel = 0;                    }                    if (strengthLevel <= 1)                    {                        strengthLevel = 1;                    }                    this.strongDiv.className = "strengthLv" + strengthLevel;                    this.passwordStrengthLevelDiv.innerText = strengthText[strengthLevel];                }                this.init(passStrength);                var _this = this;                document.getElementById(pass).onkeyup = function ()                {                    _this.checkPasswordStrength(this.value);                }            }        }    </script></head><body>    <input type="password" name="pass" id="pass" maxlength="16" />    <div class="pass-wrap">        <em>密码强度:</em>        <div id="passStrength"></div>    </div></body></html>

 

http://www.cnblogs.com/yjzhu/p/3394717.html

0 0