判断密码中强弱强度---正则表达式运用

最新推荐文章于 2020-01-05 11:12:06 发布

忽然呀

最新推荐文章于 2020-01-05 11:12:06 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/javasvince/article/details/97748291

版权

判断密码中强弱强度-正则表达式运用

实际效果

未输入状态
在这里插入图片描述
弱状态

中状态

强状态

用到的知识

1.正则表达式
2.键盘抬起事件
3.jsDOM的使用

思路

1.给中强弱三种强度分别用过不同类名设置三种不同的样式
例如 lvl lvl1 lvl2 lvl3
2.给文本框添加键盘抬起事件
2.1 根据获取的值来判断密码的强度
2.2 根据密码的强度添加不同的样式

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>判断密码强弱</title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			.lvl{
				display: inline-block;
				height:20px;
				width:60px;
				border:1px solid #000;
				margin-top: 10px;
			}
			.lvl1{
				display: inline-block;
				height:20px;
				width:40px;
				background-color: red;
				margin-top: 10px;
			}
			.lvl2{
				display: inline-block;
				height:20px;
				width:80px;
				background-color: orange;
				margin-top: 10px;
			}
			.lvl3{
				display: inline-block;
				height:20px;
				width:120px;
				background-color: green;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
	 密码:<input type="text" id="password" /><br />
	 强弱<span class="lvl" id="lvl"></span>
	 
	 <script type="text/javascript">
	 	//给文本框注册onkeyup事件
		function my$(a)
		{
			return document.getElementById(a);
		}
		
		my$("password").onkeyup=function(){
			
			if(this.value.length>=6){
			   if(getLvl(this.value)!=0)
			   {
				 my$("lvl").className="lvl"+getLvl(this.value);  
			   }
			   else
			   {
				    my$("lvl").className="lvl";
			   }	
			}
			
			
			
			function getLvl(str){
				var s=0;
				//只有数字
				if(/[0-9]/.test(str))
				{
					s++;
				}
				//只有字母
				if(/[a-zA-Z]/.test(str))
				{
					s++;
				}
				//特殊字符
				if(/[^0-9a-zA-Z_]/.test(str))
				{
					s++;
				}
				return s;
			}
		}
		
	
	 </script>
		
	</body>
</html>