密碼強度

時間 2019-11-24

標籤密碼強度简体版

原文原文鏈接

效果javascript

		<style type="text/css">
			span{
				width:80px;
				height: 10px;
				display: inline-block;
				background: grey;
				margin-right: 3px;
				font-size: 18px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<input type="text" id="txt" />
		<div id="box" style="margin-top: 4px;">
			<span id="r">弱</span>
			<span id="z">中</span>
			<span id="q">強</span>
		</div>
	</body>
</html>
<script src="public.js"></script>
<script type="text/javascript">
 	/*
 	 一、一類字符 是   弱         純數字  弱              純字母  弱                  純 特殊字符 弱
 	 二、兩類字符 是   中   
 	 三、三類字符      強
 	*/	
 	//包含數字   字母  特殊字符 三個正則
	var num = /^\d+$/;//純數字
	var char_ = /^[a-z]+$/i;//純字母
	var other = /^[!@#$%^&*]+$/;//純特殊字符
	
	var _num = /\d+/;//包含數字
	var _char = /[a-z]+/i;//包含字母
	var _other = /[!@#$%^&*]+/  //包含特殊字符
	
	$id("txt").onkeyup = function(){
		var str = this.value;
		if(str.length < 5){//內容的長度小於5，顏色不變
			$id("r").style.background = "grey";
			$id("z").style.background = "grey";
			$id("q").style.background = "grey";
			return
		}
		//排他思想
		$id("r").style.background = "grey";
		$id("z").style.background = "grey";
		$id("q").style.background = "grey";
		if(num.test(str) || char_.test(str) || other.test(str)){//純數字或者純字母或者純其餘字符都是弱
			$id("r").style.background = "deeppink";
		}else if(_num.test(str) && _char.test(str) && _other.test(str)){//三個都包含 強
			$id("q").style.background = "deeppink";
		}else{
			$id("z").style.background = "deeppink";
		}
	}
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。