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密码强度提醒就介绍到这了。

回复

我来回复
  • 暂无回复内容