javascript实现密码强度

最新推荐文章于 2021-05-07 11:52:11 发布

邬小洪

最新推荐文章于 2021-05-07 11:52:11 发布

阅读量457

点赞数

分类专栏： java基础文章标签： javascript function html border 测试 action

本文链接：https://blog.csdn.net/wuxiaohong520/article/details/2626844

版权

java基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title>passwordTest</title>

	</head>

	<style>

		body{

			font-size:12;

			}

		td{

			vertical-align:middle;

			font-size:12;

		}

	</style>

	<script language=javascript> 

	//CharMode函数 

	//测试某个字符是属于哪一类. 

	function CharMode(iN){ 

		if (iN>=48 && iN <=57) //数字 

			return 1; 

		if (iN>=65 && iN <=90) //大写字母 

			return 2; 

		if (iN>=97 && iN <=122) //小写 

			return 4; 

		else 

			return 8; //特殊字符 

	} 	

	//bitTotal函数 

	//计算出当前密码当中一共有多少种模式 

	function bitTotal(num){ 

		modes=0; 

		for (i=0;i<4;i++){ 

			if (num & 1) modes++; 

			num>>>=1; 

		} 

		return modes; 

	} 	

	//checkStrong函数 

	//返回密码的强度级别 	

	function checkStrong(sPW){ 

		if (sPW.length<=4) 

			return 0; //密码太短 

		Modes=0; 

		for (i=0;i<sPW.length;i++){ 

			//测试每一个字符的类别并统计一共有多少种模式. 

			Modes|=CharMode(sPW.charCodeAt(i)); 

		} 	

		return bitTotal(Modes); 	

	} 	

	//pwStrength函数 

	//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色 	

	function pwStrength(pwd){ 

		O_color="#eeeeee"; 

		L_color="#FF0000"; 

		M_color="#FF9900"; 

		H_color="#33CC00"; 

		if (pwd==null||pwd==""){ 

			Lcolor=Mcolor=Hcolor=O_color; 

			document.getElementById("trDiv").style.display="none";

			document.getElementById("strongId").innerHTML="" ;

		} 

		else{ 

			document.getElementById("trDiv").style.display="" ;

			S_level=checkStrong(pwd); 

			switch(S_level) { 

				case 0: 

					Lcolor=Mcolor=Hcolor=O_color;

				case 1: 

					Lcolor=L_color; 

					Mcolor=Hcolor=O_color; 

					document.getElementById("strongId").innerHTML="弱" ;

					break; 

				case 2: 

					Lcolor=Mcolor=M_color; 

					Hcolor=O_color; 

					document.getElementById("strongId").innerHTML="中" ;

					break; 

				default: 

					Lcolor=Mcolor=Hcolor=H_color; 

					document.getElementById("strongId").innerHTML="强" ;

			} 

		} 	

		document.getElementById("strength_L").style.background=Lcolor; 

		document.getElementById("strength_M").style.background=Mcolor; 

		document.getElementById("strength_H").style.background=Hcolor; 

		return; 

	} 

                     </script>

	<body>

		<form name=form1 action="">

			输入密码:

			<input type=password size=20 maxlength="20"

				onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)>



			<table width="200" border="0" cellspacing="0" cellpadding="0"

				height="20" style=display:inline>

				<tr align="center" bgcolor="#eeeeee" id="trDiv"

					style="display:none;">

					<td></td>

					<td width="33%" id="strength_L">

					</td>

					<td width="33%" id="strength_M">

						<div id="strongId" />

					</td>

					<td width="33%" id="strength_H">

					</td>

				</tr>

			</table>



		</form>

	</body>

</html>

邬小洪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现密码强度

passwordTest body{ font-size:12; } td{ vertical-align:middle; font-size:12; } //CharMode函数 //测试某个字符是属于哪一类.
复制链接

扫一扫

专栏目录