关于页面密码强度的设计

最新推荐文章于 2024-07-15 10:47:23 发布

蓉城四少-引路人

最新推荐文章于 2024-07-15 10:47:23 发布

阅读量1.2k

点赞数 1

分类专栏： js 文章标签： js jQuery 密码强度

本文链接：https://blog.csdn.net/kiley1984/article/details/69062835

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先，我们来了解下按位或运算：将进行按位或运算的两个变量先转换为2进制，然后进行按位运算。

比如： 2|4

2对应的2进制 0010

4对应的2进制 0100

按位或运算 0110=6

这时，我们发现，转换为2进制后，对应的上下两位中，只要有1位为1，结果就是为1，这也是按位或运算的准则。而结果刚好是2+4=6。

这时，我们再来看看 6|2

6对应的2进制 0110

2对应的2进制 0010

按位或运算 0110=6

这时，我们发现，只要前面使用按位或运算过的数值（这里的2），再次使用其进行按位或运算时，结果不变（这里仍然为6）。利用这一特性，我们就可以实现密码强度值的运算

接下来我们需要用到正则表达式来校验输入的每一个字符，所以需要对正则表达式有一定了解：

匹配0-9的正则表达式 [0-9]

匹配小写字符的正则表达式 [a-z]

匹配大写字符的正则表达式 [A-Z]

有了这些正则表达式，我们就可以编写代码了，具体如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>密码强度</title>
		<style>
			.qiangdu{
			    height: 17px;
			    width: 54px;
			    background: gray;
			    display: inline-block;
			    font-size: 10px;
			    text-align: center;
			}
			.active{
			    background: green;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="text" id="pw">
			<div class="qiangdu-box">
				<div class="qiangdu">弱</div>
				<div class="qiangdu">中</div>
				<div class="qiangdu">强</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-2.1.4.js" ></script>
	<script>
		$('#pw').on('keyup',function(){//添加键盘按键监听事件，当按键松开时做事
			var value = $(this).val();//取出输入框的值
			//当输入框未进行输入时清除所有密码强度显示
			if(value == undefined || value == ''){
				$(".qiangdu").removeClass("active");
				return;
			}
			var weight = 0;//密码强度值默认是0
			for(var i=0; i<value.length; i++){
				var c = value.substring(i, i+1);//循环取出每一个字符
				var reg1 = /[0-9]/;//正则表达式，匹配数字
				var reg2 = /[a-z]/;//正则表达式，匹配小写字符
				var reg3 = /[A-Z]/;//正则表达式，匹配大写字符
				if(reg1.test(c)){
					//进行按位或运算，如果下一个字符还是数字，
					//再与2进行按位或运算，就不会改变密码强
					//度的值，后面的运算，原理一致
					weight |= 2;//如果是数字，强度值+2
				} else if(reg2.test(c)){
					weight |= 4;//如果是小写字符，强度值+4
				} else if(reg3.test(c)){
					weight |= 8;//如果是大写字符，强度值+8
				} else {
					weight |= 16;//如果是特殊字符，强度值+16
				}
			}
			//强度值0-10为弱，10-20为中，>20为强
			if(weight > 0 && weight <= 10){
				//强度值为弱时，清除所有已激活的强度显示
				$(".qiangdu").removeClass("active");
				//将强度弱显示出来
				$(".qiangdu:eq(0)").addClass("active");
			} else if(weight > 10 && weight <= 20){
				//强度值为中时，清除所有已激活的强度显示
				$(".qiangdu").removeClass("active");
				//将强度弱显示出来
				$(".qiangdu:eq(0)").addClass("active");
				//将强度中显示出来
				$(".qiangdu:eq(1)").addClass("active");
			} else {
				//强度值为中时，清除所有已激活的强度显示
				$(".qiangdu").removeClass("active");
				//将所有强度显示出来
				$(".qiangdu").addClass("active");
			}
		});
	</script>
</html>

代码注释很详细，这里就不多说，希望对大家有所帮助