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

随机推荐

Aptana 插件 for Eclipse 4.4
http://download.aptana.com/studio3/plugin/install Aptana Update Site This site is designed to be use ...
备份数据库SQL Server 2008下实测
下面的存储过程适用: 1.一次想备份多个数据库. 2.只需要一步操作,在有存储过程的条件下. 3.可以根据自己的需要修改存储过程. /*----------------------------- De ...
string subscript out of range
刚刚练习华为机试上的题目遇到了这个问题,奉上两个小题: //题目描述 // //描述: //输入一个整数,将这个整数以字符串的形式逆序输出 //程序不考虑负数的情况,若数字含有0,则逆序形式也含有0, ...
Scrum流程
敏捷Scrum流程图: Sprint Planing Meeting: 1.Next Spring Goal; 2.Sprint Backlog; 3.Updated Product Backlog; ...
DOCTYPE的笔记
平时用HTML5 所以都直接简写doctype <!DOCTYPE html> <html> 从来没考虑这个东西全文是什么 <!DOCTYPE html PUBLIC & ...
Jquery 遍历表单 AJAX提交
function test(){ var arrayObj = new Array(); $("#contentTable tbody tr").each(function(){ ...
HDU-3872 Dragon Ball 线段树+DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3872 题意:有n个龙珠按顺序放在一列,每个龙珠有一个type和一个权值,要求你把这n个龙珠分成k个段, ...
MoveTo和MoveBy
cc.MoveTo是“移动到这里",而cc.MoveBy则是“相对于之前点再移动”,通俗一点就是说这里需要两个坐标pos1(x1,y1),pos2(x2,y2). 如果是cc.MoveTo的 ...
ubuntu cloud-archive 软件包无法验证包来源
第三百四十四天 how can I 坚持
三言诗,把自己的心情,想要说的话用三句话诗意的表达出来.像: 烦===>好想睡一觉,待日落,盼天明. 愁====>待到花开花落,闲庭信步,蹋碎一世忧愁. 三句话,可以表达的很好. 老是感觉 ...

js密码强度

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

随机推荐

热门专题