js密码强度

浏览数：19 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>密码强度检测</title>
		<style type="text/css">
			body {
				font: 12px/1.5 Arial;
			}
			input {
				float: left;
				font-size: 12px;
				width: 150px;
				font-family: arial;
				border: 1px solid #ccc;
				padding: 3px;
			}
			input.correct {
				border: 1px solid green;
			}
			input.error {
				border: 1px solid red;
			}
			#tips {
				float: left;
				margin: 2px 0 0 20px;
			}
			#tips span {
				float: left;
				width: 50px;
				height: 20px;
				color: #fff;
				overflow: hidden;
				background: #ccc;
				margin-right: 2px;
				line-height: 20px;
				text-align: center;
			}
			#tips.s1 .active {
				background: #f30;
			}
			#tips.s2 .active {
				background: #fc0;
			}
			#tips.s3 .active {
				background: #cc0;
			}
			#tips.s4 .active {
				background: #090;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oTips = document.getElementById("tips");
				var oInput = document.getElementsByTagName("input")[0];
				var aSpan = oTips.getElementsByTagName("span");
				var aStr = ["弱", "中", "强", "非常好"];
				var i = 0;

				oInput.onkeyup = oInput.onfocus = oInput.onblur = function() {
					var index = checkStrong(this.value);
					this.className = index ? "correct" : "error";
					oTips.className = "s" + index;
					for ( i = 0; i < aSpan.length; i++)
						aSpan[i].className = aSpan[i].innerHTML = "";
						if(index==4){
							index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
							index && (aSpan[index - 2].className = "active", aSpan[index - 2].innerHTML = aStr[index - 2]);
							index && (aSpan[index - 3].className = "active", aSpan[index - 3].innerHTML = aStr[index - 3]);
							index && (aSpan[index - 4].className = "active", aSpan[index - 4].innerHTML = aStr[index - 4]);
						}else if(index==3){
							index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
							index && (aSpan[index - 2].className = "active", aSpan[index - 2].innerHTML = aStr[index - 2]);
							index && (aSpan[index - 3].className = "active", aSpan[index - 3].innerHTML = aStr[index - 3]);
						}else if(index==2){
							index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
							index && (aSpan[index - 2].className = "active", aSpan[index - 2].innerHTML = aStr[index - 2]);
						}else if(index==1){
							index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
						}
						
				};
			};
			/** 强度规则
			 + ------------------------------------------------------- +
			 1) 任何少于6个字符的组合，弱；任何字符数的同类字符组合，弱；
			 2) 任何字符数的两类字符组合，中；
			 3) 12位字符数以下的三类或四类字符组合，强；
			 4) 12位字符数以上的三类或四类字符组合，非常好。
			 + ------------------------------------------------------- +
			 **/
			//检测密码强度
			function checkStrong(sValue) {
				var modes = 0;
				if (sValue.length < 6)
					return modes;
				if (/\d/.test(sValue))
					modes++;
				//数字
				if (/[a-z]/.test(sValue))
					modes++;
				//小写
				if (/[A-Z]/.test(sValue))
					modes++;
				//大写
				if (/\W/.test(sValue))
					modes++;
				//特殊字符
				switch (modes) {
					case 1:
						return 1;
						break;
					case 2:
						return 2;
					case 3:
					case 4:
						return sValue.length < 12 ? 3 : 4;
						break;
				}
			}
		</script>
	</head>
	<body>
		<input type="password" value="" maxlength="16" />
		<div id="tips">
			<span></span><span></span><span></span><span></span>
		</div>
	</body>
</html>

js密码强度,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js密码强度