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" ...

随机推荐

Linux 通过YUM安装rzsz
yum自动安装: yum install lrzsz
Worm
Description 自从见识了平安夜苹果的涨价后,Lele就在他家门口水平种了一排苹果树,共有N棵. 突然Lele发现在左起第P棵树上(从1开始计数)有一条毛毛虫.为了看到毛毛虫变蝴蝶的过程,Le ...
Linux 权限相关
Linux中,所有文件都有三种权限:User ,Group,Other 三个文件: /etc/passwd :包括所有系统账号,一般用户身份和root信息 /etc/shadow :保存个人密码 / ...
耳机jack构造及在应用时可能出现的问题
目前市场上耳机分为4环耳机(图1所示,iphone型)和3环耳机(图2所示).4环耳机称为headset,3环耳机称为headphone,两者之间的区别就是4环耳机比3环耳机多个micphone.而J ...
remoting blazeds 实施步骤
remoting 实施步骤 1.创建 --web project 和 -- Flex project 2.在web project 下创建 -- com.HelloRemoting: package ...
JavaScript面向对象(01)--函数
在JavaScript中,函数和对象有区别,也有联系, 首先函数是一个对象,但是和对象存在一些区别如下: 1,不论在java还是js中,如果把一个对象赋值给另一个变量,那么,后者会指向前者对象所在的内 ...
MapSearch 阅读随笔
MapSearch https://developer.apple.com/library/ios/samplecode/MapSearch/Introduction/Intro.html#//app ...
移动端rem布局
手机页面——分辨率特别乱: 1.定宽320px——优点:简单,缺点:不能适应 2.百分比——优点:能适应各种分辨率,缺点:太麻烦 3.rem——优点:方便.适应各种分辨率(首先定义一个“根大小”htm ...
C++ 之关联容器 map
标准库定义了四种关联容器:map是其中之一(另外还有set.multimap.multiset).map的元素以键-值(key-value),在学了顺序容器之后,再学习关联容器,就比较比较好理解了. ...
mvn安装jar文件到本地
mvn install:install-file -DgroupId=com.jfinal -DartifactId=jfinal -Dversion=2.3 -Dpackaging=jar -Dfi ...

js密码强度

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

随机推荐

热门专题