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

  1. JS密码强度检测

    //校验密码强度---沒有匹配到以下級別就提示 function checkPassWord(value){ // 0: 表示第一个级别 1:表示第二个级别 2:表示第三个级别 // 3: 表示第四个 ...

  2. js密码强度校验

    function AuthPasswd(string) { if(!string){ jQuery("#low").removeClass("org"); }) ...

  3. js实现密码强度

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. JS正则检测密码强度

    今天遇到个需求,使用JS检测密码强度:密码长度最短为8,必须同时包含字母.数字.特殊符号. 代码如下: /*         * 检测密码复杂度         */         function ...

  5. js判断密码强度

    html代码: <form name="form1" action=""> 密码:<input type="password&quo ...

  6. js动态判断密码强度&&实用的 jQuery 代码片段

    // 网上拷贝的代码,效果不太好需要自己调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  7. 密码强度的js插件（完成）

    效果如下图: 低:

  8. js 检验密码强度

    html 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset=&quo ...

  9. js实现密码强度验证

    <html> <head> <meta http-equiv="content-type" content="text/html" ...

随机推荐

  1. C++的类成员和类成员函数指针

    类成员函数指针: 用于访问类成员函数,和一般函数指针有区别. 类成员函数处理的是类数据成员,声明类成员函数指针的同时,还要指出具体是哪个类的函数指针才可以.调用时也要通过对象调用. 而对于类的静态成员 ...

  2. WebGoat学习——SQL注入（SQL Injection）

    SQL注入(SQL Injection) 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.攻击者通过web请求提交带有影响正 ...

  3. （转载）OC学习篇之---Foundation框架中的其他类(NSNumber,NSDate,NSExcetion)

    前一篇说到了Foundation框架中的NSDirctionary类,这一一篇来看一下Foundation的其他常用的类:NSNumber,NSDate,NSException. 注:其实按照Java ...

  4. （转载）OC学习篇之---Foundation框架中的NSArray类和NSMutableArray类

    在之前的一篇文章中介绍了Foundation框架中的NSString类和NSMutableString类,今天我们继续来看一下Foundation框架中的NSArray类和NSMutableArray ...

  5. 前端复习－02-ajax原生以及jq和跨域方面的应用。

    ajax这块我以前一直都是用现成的jq封装好的东西,而且并没有深入浅出的研究过,也没有使用过原生形式的实现.包括了解jsonp和跨域的相关概念但是依然没有实现过,其中有一个重要的原因我认为是我当时并不 ...

  6. UTC+0800是什么意思

    <%@ language="javascript" %> <html> <body> <% var d=new Date() var h= ...

  7. HTML结构标签介绍

    HTML:超文本标记语言   介绍HTML基本标记   1:头部标记(head)-----  头部的内容不会再页面上显示 在头部元素中,一般需要包括标题<title>,基本信息(文档样式, ...

  8. linux运维工程师

    本人是linux运维工程师,对这方面有点心得,现在我说说要掌握哪方面的工具吧说到工具,在行外可以说是技能,在行内我们一般称为工具,就是运维必须要掌握的工具.我就大概列出这几方面,这样入门就基本没问题了 ...

  9. CodeForces 710A King Moves (水题)

    题意:给定一个坐标,问你皇后有几个方向可以走. 析:直接格举那八个方向即可. 代码如下: #pragma comment(linker, "/STACK:1024000000,1024000 ...

  10. Max retries exceeded with url

    78 Traceback (most recent call last):   File "thread072413.py", line 163, in <module> ...