js检查密码强度插件 | 详细使用方法

  • 2017-05-01
  • 15,324
  • 11
  • 7

文章作者:可可君-全栈 | 原创

最近我一个刚刚初入程序员行业的个同学请求我的帮助,要我帮他做一个密码强度的检查器。这不,最近刚刚加入小朱的博客网,也帮着一起建设起来,以后平时一些开发经验就在这里共享给大家啦。同时也欢迎各位高手加入,啦啦啦,好了,有点骚了。废话不多说…根据小朱同学的高质量要求….遵循本博客网的博文结构有图片,教程要详细,还得附源码。

首先-插件介绍

这是用来检测密码复杂度的一个小程序员,或者说是插件吧,很容易使用的。下面是复杂度等级图片,图片素材由小朱帮忙设计。

rank

然后就使用到的了CSS Sprites来切图,也就是被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。

↓在线运行中,可在输入框输入密码测试

 

使用方法:

1、在你的网站头部head标签里添加这段js代码,这是核心代码,复制检查密码复杂度的。

<script>
function pwdCheck() {
	checkPasswordLevel = function(strPassword) {
		var result = 0;
		if (strPassword.length == 0) result += 0;
		else if (strPassword.length < 8 && strPassword.length > 0) result += 5;
		else if (strPassword.length > 10) result += 25;
		else result += 10;

		//check letter
		var bHave = false;
		var bAll = false;
		var capital = strPassword.match(/[A-Z]{1}/); //找大写字母
		var small = strPassword.match(/[a-z]{1}/); //找小写字母
		if (capital == null && small == null) {
			result += 0; //没有字母
			bHave = false;
		} else if (capital != null && small != null) {
			result += 20;
			bAll = true;
		} else {
			result += 10;
			bAll = true;
		}
		//alert("检查字母:"+result);
		//检查数字
		var bDigi = false;
		var digitalLen = 0;
		for (var i = 0; i < strPassword.length; i++) {

			if (strPassword.charAt(i) <= '9' && strPassword.charAt(i) >= '0') {
				bDigi = true;
				digitalLen += 1;
				//alert(strPassword[i]);
			}

		}
		if (digitalLen == 0) //没有数字
		{
			result += 0;
			bDigi = false;
		} else if (digitalLen > 2) //2个数字以上
		{
			result += 20;
			bDigi = true;
		} else {
			result += 10;
			bDigi = true;
		}
		//alert("数字个数:" + digitalLen);
		//alert("检查数字:"+result);
		//检查非单词字符
		var bOther = false;
		var otherLen = 0;
		for (var i = 0; i < strPassword.length; i++) {
			if ((strPassword.charAt(i) >= '0' && strPassword.charAt(i) <= '9') || 
                           (strPassword.charAt(i) >= 'A' && strPassword.charAt(i) <= 'Z') || 
                           (strPassword.charAt(i) >= 'a' && strPassword.charAt(i) <= 'z')) 
                           continue;
			otherLen += 1;
			bOther = true;
		}
		if (otherLen == 0) //没有非单词字符
		{
			result += 0;
			bOther = false;
		} else if (otherLen > 1) //1个以上非单词字符
		{
			result += 25;
			bOther = true;
		} else {
			result += 10;
			bOther = true;
		}
		//alert("检查非单词:"+result);
		//检查额外奖励
		if (bAll && bDigi && bOther) result += 5;
		else if (bHave && bDigi && bOther) result += 3;
		else if (bHave && bDigi) result += 2;
		//alert("检查额外奖励:"+result);
		var level = "";
		//根据分数来算密码强度的等级
		if (result >= 80) level = "rank r7";
		else if (result >= 70) level = "rank r6";
		else if (result >= 60) level = "rank r5";
		else if (result >= 50) level = "rank r4";
		else if (result >= 40) level = "rank r3";
		else if (result > 20) level = "rank r2";
		else if (result > 0) level = "rank r1";
		else level = "rank r0";
		return level.toString();
	}
	/**************************************************************************
			 * 设置密码强度样式
	 **************************************************************************/
	setPasswordLevel = function(passwordObj, levelObj) {
		var level = "rank r0"; //默认为0级
		level = checkPasswordLevel(passwordObj.value);
		levelObj.className = level;
	}
	var text = document.getElementById("text").value;
	document.getElementById("passwordLevel").className = checkPasswordLevel(text);
}

< /script>

2、还需要加入css样式,同样的也是在网站头部的head标签里面添加如下代码

<style>
.rank {
	border: none;
	background: url("rank.jpg") no-repeat;
	width: 145px;
	height: 22px;
	vertical-align: middle;
	cursor: default;
	margin: 0 0 0 5px;
	background-size: cover;
}
.r0 {background-position: 0 2;}
.r1 {background-position: 0 -19px;}
.r2 {background-position: 0 -40px;}
.r3 {background-position: 0 -61px;}
.r4 {background-position: 0 -82px;}
.r5 {background-position: 0 -103px;}
.r6 {background-position: 0 -124px;}
.r7 {background-position: 0 -145px;}
</style>

3、然后表单这样写,就成功啦!当然你可以自定义你的表单。

<input type="password" id="text" onkeyup="pwdCheck()" placeholder="输入密码">
<input id="passwordLevel" class="rank r0" disabled="disabled" >

第二行的class="rank r0"表示默认密码复杂度为0级。

下载完整源码 | 大小52KB

评论

  • 会飞的鱼ゆミ
    会飞的鱼ゆミ回复

    进度条很好看

  • application
    application回复

    哈哈,java也有正则,不过显然的用java来验证是不明智的

  • 博弈棋子回复

    正要找这样的源码

  • 明日世界Disney回复

    💡 有趣,留名,说不定会用到

  • 何智恒-计网三回复

    复杂度不难判断,我觉得就想知道这个雪碧图怎么切

  • 一个
    一个回复

    function isPassWord(password){
    if (!/^\w{6,20}@?#?\/?.+$/.test(password)) {
    alert(‘密码不得低于6位或者高于20位,由数字字母下划线组成!’);
    return false;
    }
    var count = 0;
    if (/_/.test(password)) {
    count++;
    }
    if (/\d/.test(password)) {
    count++;
    }
    if (/[a-zA-Z]/.test(password)) {
    count++;
    }
    alert(‘密码强度为’+count);
    return true;
    }
    // console.log(isPassWord(‘___sada1’));
    var res = prompt(“请输入您的密码!,密码不得低于6位或者高于20位由数字字母下划线组成”);
    console.log(isPassWord(res));

  • 小朱朱
    小朱朱回复

    有更好的方法就在下面贴上代码吧,帮助我们的笔者改进

  • ```q2回复

    swww.

  • say·hello回复

    是的,目前现在都是流行用正则,有更多方法。