PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > JavaScript教程 > 正文

    js检验密码强度示例分享

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:使用说明:1、对象的第一个参数是密码输入框的 id,第二个参数是密码强度长条的 id。2、checkStrength 方法中可以自定义密码强度的规则...
    使用说明: 
     
    1、对象的第一个参数是密码输入框的 id,第二个参数是密码强度长条的 id。 
     
    2、checkStrength 方法中可以自定义密码强度的规则。 
     
    3、密码强度显示低中高分别对应 3 个 css 样式(strengthLv1、strengthLv2、strengthLv3)。 

    html 代码如下:

     
    复制代码 代码如下:
    <!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>
    </head>
    <body>
    <input type="password" name="pass" id="pass" maxlength="16"/>
    <div class="pass-wrap">
    <em>密码强度:</em>
    <div id="passStrength"></div>
    </div>
    </body>
    </html>
    <script type="text/javascript" src="js/passwordStrength.js"></script>
    <script type="text/javascript">
    new PasswordStrength('pass','passStrength');
    </script>

    js 代码如下:

     
    复制代码 代码如下:
    function PasswordStrength(passwordID,strengthID){
    this.init(strengthID);
    var _this = this;
    document.getElementById(passwordID).onkeyup = function(){
    _this.checkStrength(this.value);
    }
    };
    PasswordStrength.prototype.init = function(strengthID){
    var id = document.getElementById(strengthID);
    var div = document.createElement('div');
    var strong = document.createElement('strong');
    this.oStrength = id.appendChild(div);
    this.oStrengthTxt = id.parentNode.appendChild(strong);
    };
    PasswordStrength.prototype.checkStrength = function (val){
    var aLvTxt = ['','低','中','高'];
    var lv = 0;
    if(val.match(/[a-z]/g)){lv++;}
    if(val.match(/[0-9]/g)){lv++;}
    if(val.match(/(.[^a-z0-9])/g)){lv++;}
    if(val.length < 6){lv=0;}
    if(lv > 3){lv=3;}
    this.oStrength.className = 'strengthLv' + lv;
    this.oStrengthTxt.innerHTML = aLvTxt[lv];
    };

    效果图:
    js检验密码强度示例分享
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-69-948-1.html
    相关热词搜索: