JavaScript密码强度提醒
JavaScript密码强度提醒属于前端实例代码,有关更多实例代码大家可以查看。
人性化密码设置,通常会根据设置的密码内容,提示密码的强度,在一定程度上能够提醒用户将密码设置的更为安全。
下面通过代码实例介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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"> 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]; }; window.onload=function(){ new PasswordStrength('pass','passStrength'); } </script> </head> <body> <input type="password" name="pass" id="pass" maxlength="16"/> <div class="pass-wrap"> 密码强度:<div id="passStrength"></div> </div> </body> </html>
上面的代码实现了简单的密码强度提示效果,下面介绍一下它的实现过程。
一.代码注释:
(1).function PasswordStrength(passwordID, strengthID) {},声明一个函数,这里是用作构造函数,第一个参数是密码框的id属性值,第二个参数是要显示密码强度的元素的id属性值。
(2).this.init(strengthID),init()函数是PasswordStrength()是在构造函数原型原型对象上的一个函数,用来创建和追加相应的元素,this是指向PasswordStrength()构造函数的对象实例。
(3).var _this = this,将PasswordStrength()构造函数实例对象this引用赋值给变量_this。
(4).document.getElementById(passwordID).onkeyup=function() {_this.checkStrength(this.value);},为文本框注册onkeyup事件处理函数。
(5).PasswordStrength.prototype.init=function(strengthID){},为构造函数的原型对象添加init函数。
(6).var id = document.getElementById(strengthID),获取具有指定id的元素对象。
(7).var div = document.createElement('div'),创建一个div元素。
(8).var strong = document.createElement('strong'),创建一个strong元素。
(9).this.oStrength = id.appendChild(div),将创建的div元素附加到获取元素对象中去,在本代码中就是添加到passStrength元素中去,新添加的这个div用来显示密码强度红黄蓝图示。
(10).this.oStrengthTxt = id.parentNode.appendChild(strong),给获取到元素的父节点添加一个strong子节点,在本代码中就是将strong元素添加到pass-wrap元素中去,用来显示低、中和高。
(11).PasswordStrength.prototype.checkStrength=function(val){},为构造函数的原型对象添加checkStrength函数,参数是文本框值。
(12).var aLvTxt = ['', '低', '中', '高'],创建一个数组,存储的是表示密码强度的文字。
(13).var lv = 0,声明一个变量,初始值为0,用来标识密码的强度。
(14).if(val.match(/[a-z]/g)){lv++;},如果密码中包含a-z的字母,那么lv加1。
(15).if(val.match(/[0-9]/g)){lv++;},如果密码中包含0-9的数字,那么lv加1。
(16).if(val.match(/(.[^a-z0-9])/g)){lv++;},如果密码中包含的字符并非字母或者数字,而是其他比较偏僻的符号,那么lv加1.
(17).if(val.length < 6){lv=0;},如果密码的长度小于6,那么僵lv的值重置为0。
(18).if(lv > 3){lv=3;},如果lv大于3,那么就将其设置为3.
(19).this.oStrength.className = 'strengthLv' + lv,设置第7步创建的div的class样式值。
(20).this.oStrengthTxt.innerHTML = aLvTxt[lv],在第8步创建的strong元素中显示密码强度文字。
(21).new PasswordStrength('pass','passStrength'),以构造方式的形式执行函数。
二.相关阅读:
(1).onkeyup事件参阅javascript keyup 事件一章节。
(2).prototype参阅javascript prototype 原型一章节。
(3).appendChild()参阅js appendChild()一章节。
(4).parentNode参阅js parentNode一章节。
(5).match()参阅正则表达式match()函数一章节。
(6).className参阅js className属性详解一章节。
JavaScript密码强度提醒,这样的场景在实际项目中还是用的比较多的,关于JavaScript密码强度提醒就介绍到这了。