js密码强度

<!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密码强度的更多相关文章

JS密码强度检测
//校验密码强度---沒有匹配到以下級別就提示 function checkPassWord(value){ // 0: 表示第一个级别 1:表示第二个级别 2:表示第三个级别 // 3: 表示第四个 ...
js密码强度校验
function AuthPasswd(string) { if(!string){ jQuery("#low").removeClass("org"); }) ...
js实现密码强度
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
JS正则检测密码强度
今天遇到个需求,使用JS检测密码强度:密码长度最短为8,必须同时包含字母.数字.特殊符号. 代码如下: /* * 检测密码复杂度 */ function ...
js判断密码强度
html代码: <form name="form1" action=""> 密码:<input type="password&quo ...
js动态判断密码强度&&实用的 jQuery 代码片段
// 网上拷贝的代码,效果不太好需要自己调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
密码强度的js插件（完成）
效果如下图: 低:
js 检验密码强度
html 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset=&quo ...
js实现密码强度验证
<html> <head> <meta http-equiv="content-type" content="text/html" ...

随机推荐

erase() 返回的是删除此元素之后的下一个元素的迭代器 .xml
pre{ line-height:1; color:#f0caa6; background-color:#2d161d; font-size:16px;}.sysFunc{color:#e54ae9; ...
java int和String类型之间的相互转换
String --> int 第一种方法:int i = Integer.parseInt(s); 第二种方法:int i = Integer.valueOf(s).intValue(); 两种 ...
Shapefile文件中的坐标绘制到屏幕时的映射模式设置
pDC->SetMapMode(MM_ANISOTROPIC ); //首先选择MM_ANISOTROPIC映射模式,其它映射模式都不合适 pDC->SetWindowExt( max(a ...
Windows下安装GTK+
Step 1:到GTK官方网站上下载安装包.有32位的和64位,64位的有这句: Note that these 64-bit packages are experimental. Binary co ...
[转载]我读过最好的Epoll模型讲解
转载来自:http://blog.csdn.net/mango_song/article/details/42643971 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行 ...
c++中的 extern "C"(转载）
比如说你用C 开发了一个DLL 库,为了能够让C ++语言也能够调用你的DLL 输出(Export) 的函数,你需要用extern "C" 来强制编译器不要修改你的函数名. 通常, ...
How To Set Up Port Forwarding in Linux
Port forwarding usually used when we want our computer act like a router. Our computer receive the p ...
EF selection expression 与 Linq备忘
一.左连接查询 var query = people.GroupJoin(pets, person => person, pet => pet.Owner, (person, petCol ...
在适配iPhone 6 Plus屏幕的时候，模拟器上两边有很细的白边如何解决
取消掉Constrain to margin 然后添加左右约束版权声明:本文为博主原创文章,未经博主允许不得转载.
html5 canvas图片翻转
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

js密码强度

js密码强度的更多相关文章

随机推荐

热门专题