JavaScript实现密码强度实时验证

来源：互联网发布：数字签名软件编辑：程序博客网时间：2024/04/30 05:06

JavaScript实现密码强度实时验证
在网络服务中，为了保证用户的私密信息足够安全，会要求用户输入具有一定安全级别的密码，这样可以更好的防止他人盗用。比如在注册一些游戏账号时，如果输入纯数字或纯英文字符低于6位，就会提示密码强度太低，请重新输入。一些密码强度验证的方法都是计算字符的类型，然后分类加权累算。权重越高，相应的强度也就越高。
具体的写法及实现方式有很多种，本文只介绍其中一种方案

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>密码强度实时验证</title></head><body>    <h2>密码强度实时验证</h2>    <input id="passwordStrength" data-hint='请输入密码' type="password" ><span id="showStrength"></span>    <script type="text/javascript">        window.onload = function () {            function setCss(_this,cssOption){            //判断节点类型            if (!_this || _this.nodeType ===3 || _this.nodeType === 8 ||!_this.style) {                return;            }            for(var cs in cssOption){                _this.style[cs] = cssOption[cs];            }            return _this;        }         function trim(chars){            return (chars ||"").replace(/^(\s|\u00a0)+|(\s|\u00a0)+$/g,"");        }        function passwordStrength(passwordStrength,showStrength){            var self = this;            /*字符权重；            数字1，字母2，其他字符为3            当密码长度小于6时不符合标准            长度>=6，强度小于10，强度弱            长度>=6，长度>=10且<15，强度中            长度>=6，强度>=15，强*/            passwordStrength.onkeyup = function(){                var _color = ["red","yellow","orange","green"],                        msgs = ["密码太短","弱","中","强"],                        _strength = 0,                        _v= trim(passwordStrength.value)                _vL= _v.length,                        i=0;                var charStrength = function(char){                    //计算单个字符强度                    if(char>=48 && char <=57){//数字                        return 1;                    }                    if(char>=97 && char<=122){//小写                        return 2;                    }else{                        return 3; //特殊字符                    }                }                if(_vL<6){//计算模式                    showStrength.innerText = msgs[0];                    setCss(showStrength,{                        "color":_color[0]                    })                }else{                    for(;i<_vL;i++){                        //遍历字符                        _strength+=charStrength(_v.toLocaleLowerCase().charCodeAt(i));                    }                    if(_strength<10){                        //强度小于10                        showStrength.innerText = msgs[1];                        setCss(showStrength,{                            "color":_color[1]                        })                    }                    if(_strength>=10&&_strength<15){                        showStrength.innerText = msgs[2];                        setCss(showStrength,{                            "color":_color[2]                        })                    }                    if(_strength>=15){                        showStrength.innerText = msgs[3];                        setCss(showStrength,{                            "color":_color[3]                        })                    }                }            }        }        passwordStrength(                document.getElementById("passwordStrength"),                document.getElementById("showStrength"));    };    </script></body></html>

阅读全文

1 0