密码强度校验

最新推荐文章于 2024-09-05 09:05:03 发布

转载最新推荐文章于 2024-09-05 09:05:03 发布 · 632 阅读

文章标签：

#笔记

java 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一个简单的密码强度检测程序，该程序使用JavaScript实现，能够实时反馈密码的强度等级，并通过不同颜色展示强度变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
	   <!-- 页面编码集 gbk  gb2312  utf-8 -->
	   <meta http-equiv="Content-Type" content="text/html;charset=gbk" />
	   <title>密码校验</title>
	   <style type="text/css">
		 body{font:12px Arial;}
		 input{float:left;font-size:12px;width:150px;border:1px solid #ccc;padding:3px;}
	     
         #tips{float:left;margin:2px 0 0 20px;}
         #tips span{float:left;width:50px;height:20px;color:#999999;overflow:hidden;background:#ccc;margin-right:2px;line-height:20px;text-align:center;}

		 #tips.s1 .t{background:#FF0000} /*红色*/
		 #tips.s2 .t{background:#FF9900} /*橙色*/
		 #tips.s3 .t{background:#FFFF66} /*黄色*/
		 #tips.s4 .t{background:#009900} /*绿色*/
	   </style>
	</head>

	<body>
	   密码：<input id="text" type="text" value="" maxlength="16" />
        <div id="tips">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

		<script type="text/javascript">
		    var password = document.getElementById('text'); // 获取文本框的对象
            var div = document.getElementById('tips'); // 获取div的对象
			var spanDoms = document.getElementsByTagName('span'); // 获取所有span
			
			var astr = ["弱","中","强","很强"];
			// 键盘事件
			password.onkeyup = function(){
				var index = checkPassword(this.value); // 获取用户输入的密码，然后判断强度
				div.className = "s" + index; 
				for(var i=0;i<spanDoms.length;i++){
					spanDoms[i].className = ""; // 清空css样式
					spanDoms[i].innerHTML = ""; // 清空掉内容

					if(index){  // 0 false  其余代表true
					   spanDoms[index-1].className = "t"; //添加样式
					   spanDoms[index-1].innerHTML = astr[index-1]; // 级别对应的中文
					}
				}
			}


            // 检验密码的强度方法
            function checkPassword(value){
				// 如果 modes=0 表示初始值    1 第一个级别  2 第二个级别   3 第三级别  4 第四个
				var modes = 0; //定义一个标示符

				if(value.length<6){ // 如果密码长度小于6，就是初始值
				   return modes;
				}

				// 包含数字 modes自加1
				if(/\d/.test(value)){
					modes++;
				}
				// 包含小写字母 modes 自加
				if(/[a-z]/.test(value)){
				   modes++;
				}
				// 包含 大写字母
				if(/[A-Z]/.test(value)){
				   modes++;
				}
				// 包含 非数字 字母 
				if(/\W/.test(value)){
				    modes++;
				}
				
				switch(modes){
				    case 1:
					     return 1; 
				     break;
                    case 2:
					     return 2; 
				     break;
					 case 3:
					     return 3; 
				     break;
					 case 4:
					     return 4; 
				     break;
				}
			}

       
		</script>
	</body>
</html>