js密码强度

最新推荐文章于 2023-10-24 17:28:40 发布
最新推荐文章于 2023-10-24 17:28:40 发布
阅读量59 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/yuwensong/p/3747472.html
版权 
<!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>

 

转载于:https://www.cnblogs.com/yuwensong/p/3747472.html

weixin_34395205
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS密码强度检测及测试
07-16
使用JS检测输入的密码强度，可以独立于HTML页面，测试文件将其写在一起，需要的读者可以分开测试
用JavaScript验证密码强度
duyiwuer888的专栏
11-19 165
    规则如下:     四种组合指 数字,小写字母,大写字母,其它字符 　　把密码强度分为四等: 　　1. 密码长度小于或等于四位.或者密码只有一种组合 　　2. 密码长度大于四位, 且有两种组合. 　　3. 密码长度大于四位, 且有三种组合. 　　4. 密码长度大于四位, 且有四种组合. 　　如果没有输入则返回0 　　判断函数:     &lt;script language="JavaSc...
JS验证密码强度
Kevin's life
02-01 2677
验证“密码强度”的例子很常见，我们注册新的账号的时候往往设置密码，此时就遇到验证密码强度的问题了。“密码强度”也就是密码难易程度的意思。         原理：1、如果输入的密码为单纯的数字或者字母：提示“低”           2、如果是数字和字母混合的：提示“中”         3、如果数字、字母、特殊字符都有：提示“强”        下面是一种“密码强度”的验
js判断密码强度
人生在手
12-22 541
//CharMode函数            //测试某个字符是属于哪一类.            function CharMode(iN){            if (iN>=48 && iN     return 1;            if (iN>=65 && iN     return 2;            if (iN>=97 && iN    
JavaScript判断密码强度
weixin_43343835的博客
10-28 894
以下是代码： <html> <head> <title>JS判断密码强度</title> <script language=javascript> //判断输入密码的类型 function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 &amp.
JavaScript 密码强度判断代码
10-29
JavaScript 密码强度判断是一种常见的安全措施，用于确保用户创建的密码足够复杂，难以被破解。这段代码提供了一个简单的实现，通过分析输入的密码字符类型（数字、字母、特殊字符）和长度来评估其强度。 首先，...
JavaScript密码强度在线检测
08-18
工作分享：因工作需要，纯手工写了一个JavaScript密码强度在线检测，分享出来，希望大家喜欢
js密码强度实时检测代码
10-22
【JavaScript密码强度实时检测】 在开发网页注册功能时，确保用户设置的密码具有足够的强度是一项重要的任务。为了实现这一点，我们可以使用JavaScript进行实时的密码强度检测。本文将介绍如何使用JavaScript来实现...
javascript实现密码强度显示
10-24
在本篇介绍中，将阐述如何使用JavaScript实现密码强度的实时显示功能。密码强度显示是一个对用户非常有用的功能，它可以指导用户创建一个符合特定安全标准的密码。通常，一个强密码能够帮助更好地保护用户帐户的安全...
JS 密码强度验证(兼容IE,火狐,谷歌)
10-29
标题“JS 密码强度验证(兼容IE,火狐,谷歌)”和描述“仿JQuery中文社区注册,JS 密码强度验证(兼容IE,火狐,谷歌)”中提到的知识点涉及JavaScript、HTML表单以及如何编写兼容主流浏览器的密码强度验证功能。以下是详细...
JS实现检查密码强度函数
猿小白的博客
06-20 1185
编写一个JS函数，基于如下规则确定给定密码的强度。
js实现密码强度校验
半夏半暖半倾城的博客
06-20 2874
&lt;html&gt; &lt;head&gt; &lt;title&gt;JS判断密码强度&lt;/title&gt; &lt;script language=javascript&gt; //判断输入密码的类型 function CharMode(iN){ if (iN &gt;= 48 &amp;&amp; i...
javascript计算密码强度
岁寒松柏
09-21 835
规则如下（分四个等级，等级超高强度越高）: 0. 密码为空 1. 密码长度小于六位.或者密码只有一种组合 2. 密码长度大于五位, 且有两种组合. 3. 密码长度大于五位, 且有三种组合. 4. 密码长度大于五位, 且有四种组合. 四种组合指数字,小写字母,大写字母,其它字符 源代码如下： function EvaluatePassword(word) {
js实现密码强度判定功能
lzsan_的博客
03-31 1174
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
【js小工具】判断密码强度
最新发布
m0_61487202的博客
10-24 764
我们将介绍一种简单有效的密码强度检测方法。
JS实现密码强度的判断
m0_46381538的博客
03-09 254
css部分代码 span{display: block} body部分代码 <input type="text" id="pass"> <input type="button" id="btn" value="验证密码强度"> <span></span> JavaScript部分代码 var o...
关于js实现密码强度检测的实现
javayuto的博客
08-26 1517
首先查看效果 项目的需求 一、密码长度: 5 分: 小于等于4 个字符 10 分: 5 到7 字符 25 分: 大于等于8 个字符 二、字母: 0 分: 没有字母 10 分: 全都是小（大）写字母 20 分: 大小写混合字母 三、数字: 0 分: 没有数字 10 分: 1 个数字 20 分: 大于1 个数字 四、符号: 0 分: 没有符号 10 分: 1 个符号 25 分:...
简单的js 判断密码强度--注册用户修改密码强度
qq_32265203的博客
05-18 299
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>密码强度检测</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/...
JavaScript动态检测密码强度的原理及实现
热门推荐
Yeoman92的博客
12-07 1万+
在注册账户的时候通常会在设置密码的时候出现密码强度动态检测，网上看了一些帖子，大多只写了具体的实现过程，而没有对原理的分析过程。下面着重讲一下其原理。原理分析通常实现密码强度动态判断有两种方案实现： 正则。但其效率低一点，难度也大一些。 字符串，函数和运算符。 这里用第二种方案，但是如何判断一个密码串是强还是弱呢？ 一般我们的密码会设置为数字、字母（大小写）、特殊符号三类。 强：密码串包含其中三种
html，css，js密码强度编写
06-06
在 HTML、CSS 和 JavaScript 中实现密码强度校验可以通过以下步骤完成： 1. 在 HTML 中创建密码输入框和一个用于显示密码强度的元素（例如一个 `<span>` 或 `<div>` 元素）。例如： ``` <label for="password">密码：</label> <input type="password" id="password" name="password" onkeyup="checkPasswordStrength(this.value)"> <span id="password-strength"></span> ``` 在这个例子中，我们创建了一个密码输入框和一个用于显示密码强度的 `<span>` 元素。在输入框中输入密码时，会触发 `onkeyup` 事件，并且调用 `checkPasswordStrength()` 函数来计算密码强度并更新显示。 2. 在 CSS 中定义密码强度的样式。例如： ``` #password-strength { display: inline-block; width: 100px; height: 10px; margin-left: 10px; } #password-strength.weak { background-color: red; } #password-strength.medium { background-color: orange; } #password-strength.strong { background-color: green; } ``` 在这个例子中，我们定义了三个类名，分别对应于密码强度弱、中、强三种情况。在 `<span>` 元素中根据密码强度的不同，动态地添加或删除这些类名，从而改变元素的背景颜色。 3. 在 JavaScript 中编写 `checkPasswordStrength()` 函数来计算密码强度。例如： ``` function checkPasswordStrength(password) { var strength = 0; if (password.length >= 8) { strength += 1; } if (password.match(/[a-z]/)) { strength += 1; } if (password.match(/[A-Z]/)) { strength += 1; } if (password.match(/[0-9]/)) { strength += 1; } var passwordStrengthElement = document.getElementById('password-strength'); if (strength == 0) { passwordStrengthElement.className = ''; passwordStrengthElement.innerText = ''; } else if (strength == 1) { passwordStrengthElement.className = 'weak'; passwordStrengthElement.innerText = '弱'; } else if (strength == 2) { passwordStrengthElement.className = 'medium'; passwordStrengthElement.innerText = '中'; } else if (strength >= 3) { passwordStrengthElement.className = 'strong'; passwordStrengthElement.innerText = '强'; } } ``` 在这个例子中，我们定义了一个 `checkPasswordStrength()` 函数，并将其绑定到密码输入框的 `onkeyup` 事件上。函数中使用正则表达式来检查密码中是否包含大写字母、小写字母、数字等字符，然后根据各种条件来计算密码的强度，并更新密码强度元素的类名和文本内容。 这样，当用户在密码输入框中输入密码时，就会动态地显示密码的强度，并且根据强度的不同，密码强度元素的背景颜色也会发生变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值