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

随机推荐

dzzoffice的树型结构用户管理设计
在DzzOffice1.1的开发中,针对用户使用群体重新设计了,机构.部门.用户管理应用. 传统OA,企业相关程序,一般是设置机构-设置部门-设置职位-添加用户这样的步骤.每个步骤分为不同的管理界面. ...
高手就用Chrome不安全模式
背景:最近玩CSS3和HTML玩得不可开交. 既然要用浏览器的话,就最好在浏览器中设置一个主页,以前徒简洁就一直用百度的搜索页做主页,但是现在百度邪恶的各种广告实在让我恶心,而且一些文献资料中国网站上 ...
多态.xml
pre{ line-height:1; color:#1e1e1e; background-color:#f0f0f0; font-size:16px;}.sysFunc{color:#627cf6; ...
ISO-8859-1
ISO-8859-1编码是单字节编码,向下兼容ASCII,其编码范围是0x00-0xFF,0x00-0x7F之间完全和ASCII一致,0x80-0x9F之间是控制字符,0xA0-0xFF之间是文字符号 ...
layout相关
大致看了看布局大致有5种(approximately) 1. LinearLayout 2. RelativeLayout 3. FrameLayout 4. TableLayout 5. GridL ...
sendip简单使用
sendip是linux下一个比较好用的发包软件,简单记录一下它的用法下载源码,编译安装后,可通过 man sendip,查看具体选项介绍,其中说明sendip支持的协议包括:ipv4 ipv6 ...
封装cookie.js、EventUtil.js、
最近学习了javascript,封装好的东西看起来舒服,以备需要的时候拉出来,jquery对javascript做了很好的封装!以后会多用jquery多些 var CookieUtil = { get ...
iOS学习中的一些误区
周二拿到offer之后,周三确定了去哪家,今天周四.今天是一个例外.中午写更新. 人到了不同的阶段,最重要的就是要更新自己的方法论.也就是说,不能穿新鞋,走老路,这样人就不会有大的突破. 下面我就分析 ...
Yii 1 数据库操作笔记
$result = array( 'id'=>null, 'val'=>0 ); $row1 = Yii::app()->db->createCommand()->ins ...
30大最有影响力的Web设计与开发英文博客
1stwebdesigner的创始人Dainis Graveris挑选出30个高质量和具有影响力的Web设计与前端技术博客,其中很多我们都耳熟能详.但这么完整的列表,还是值得收藏的.另外,你大概不会了 ...

js密码强度

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

随机推荐

热门专题