密码验证

最新推荐文章于 2024-05-17 21:42:11 发布
最新推荐文章于 2024-05-17 21:42:11 发布
阅读量3.4k 收藏 6
点赞数 1
分类专栏： JavaScript jQuery HTML+CSS 文章标签： JS正则 密码验证 oninput
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wd2011063437/article/details/84108653
版权
jQuery 同时被 3 个专栏收录
22 篇文章 0 订阅
订阅专栏
JavaScript
6 篇文章 0 订阅
订阅专栏
HTML+CSS
5 篇文章 0 订阅
订阅专栏

用户在创建一个账户时，需要设置一个密码。密码的复杂程度是安全的保障之一，但是有些用户在设置密码时，总是把密码设置的过于简单，导致用户账户的安全存在威胁。因此，为了提高用户账户的安全性，添加了一个JavaScript正则表达式验证密码复杂度的验证功能。

效果图是仿照腾讯企业邮箱修改密码时的验证方式-修改密码效果图：
在这里插入图片描述

我把它扣了下来，可能效果不如腾讯企业邮的，但是效果还是实现了。没有添加常见密码的验证。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<style>
		.rules_check_wrap{ 
			position:absolute; 
			top:274px; 
			left:50%; 
			margin-left:-14px; 
			text-align:left; 
			background:#fff; 
			padding:10px; 
			font-size:12px; 
			color:#494949; 
			border-radius:5px; 
			border:1px solid #bbb; 
			box-shadow:0px 0px 5px #ccc;
		}
		.rules_check_wrap h3{ 
			font-weight:bold; 
			color:#232323; 
			margin:0; 
			padding:5px 0 5px 19px; 
			font-size:12px; 
			height:14px; 
			line-height:14px;
		}
		.rules_check_wrap li{ 
			height:14px; 
			line-height:14px; 
			padding:4px 0;
		}
		.icon_rules_check{ 
			float:left; 
			height:14px; 
			width:14px; 
			margin:-2px 4px 0 -10px; 
			background:url(./img/none.png) no-repeat;
		}
		.rules_check_pass{
			opacity:.6;
			filter:alpha(opacity=60);
		}
		.arrow_l, .arrow_r{
			position:absolute;
			top:0;
			left:0;
			margin-top:54px;
			margin-left:-20px;
			display:block; 
			width:0; 
			height:0; 
			font-size:0; 
			overflow:hidden; 
			border:10px solid transparent; 
			_border-color:tomato; 
			_filter:chroma(color=tomato);
		}
		.arrow_l{ 
			border-right-color:#bbb;
		}
		.arrow_r{ 
			border-right-color:#fff; 
			margin-left:-19px;
		}
		.rules_check_wrap{
			display:none;
			left:584px;
			top:85px;
			z-index:10;
		}
		.rules_check_wrap ul{
			list-style:none;
			padding:1px 10px;
			margin:1px;
		}
		.rules_check_pass .icon_rules_check{ 
			background:url(./img/pass.png) 0px 2px no-repeat;
		}
		.rules_check_fail .icon_rules_check{
			background:url(./img/fail.png) 0px 2px no-repeat;
		}
		.rules_check_pass{
			opacity:.6;
			filter:alpha(opacity=60);
		}
	</style>
</head>
<body class="tbody" onload="">
	<script>
		$(function(){
		  	$("#newsecpwd").focus(function(){
		    	$(".rules_check_wrap").css("display","block");
		  	});
		  	$("#newsecpwd").blur(function(){
		  		$(".rules_check_wrap").css("display","none");
		  	});
		});
		function onchangpwd(){
	  		// var newpwd = document.getElementById("newsecpwd").value;
	  		var newpwd = $("#newsecpwd").val();
	  		var user = 'admin';
	  		if(newpwd != ''){
	  			//判断是否同时包含大写字母、小写字母和数字
                var baohan =/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/;
                if(baohan.test(newpassword)){
                    $(".rules_check_wrap ul li:eq(0)").removeClass();
                    $(".rules_check_wrap ul li:eq(0)").addClass("rules_check_pass");
                }else{
                    $(".rules_check_wrap ul li:eq(0)").removeClass();
                    $(".rules_check_wrap ul li:eq(0)").addClass("rules_check_fail");
                    $("input[name='repassword']").attr('disabled','true');
                }

                //密码长度判断
                if(newpassword.length < 6 && newpassword.length > 0 || newpassword.length > 18){
                    $(".rules_check_wrap ul li:eq(1)").removeClass();
                    $(".rules_check_wrap ul li:eq(1)").addClass("rules_check_fail");
                    $("input[name='repassword']").attr('disabled','true');
                }else if(newpassword.length >=6 && newpassword.length <=18){
                    $(".rules_check_wrap ul li:eq(1)").removeClass();
                    $(".rules_check_wrap ul li:eq(1)").addClass("rules_check_pass");
                }else if(newpassword.length == 0){
                    $(".rules_check_wrap ul li:eq(1)").removeClass();
                    $("input[name='repassword']").attr('disabled','true');
                }

                //判断是否存在账户信息和空格
                if(/admin/.test(newpassword)){
                    $(".rules_check_wrap ul li:eq(2)").removeClass();
                    $(".rules_check_wrap ul li:eq(2)").addClass("rules_check_fail");
                    $("input[name='repassword']").attr('disabled','true');
                }else if(/\s/.test(newpassword)){
                    $(".rules_check_wrap ul li:eq(2)").removeClass();
                    $(".rules_check_wrap ul li:eq(2)").addClass("rules_check_fail");
                    $("input[name='repassword']").attr('disabled','true');
                }else{
                    $(".rules_check_wrap ul li:eq(2)").removeClass();
                    $(".rules_check_wrap ul li:eq(2)").addClass("rules_check_pass");
                }

                if((baohan.test(newpassword)) && (newpassword.length >=6 && newpassword.length <=18) && !(/admin/.test(newpassword)) && !(/\s/.test(newpassword))){
                    $("input[name='repassword']").removeAttr('disabled');
                }
		  		//判断是否存在常见密码
	  		}else{
	  			$("ul li").removeClass();
	  		}
	  	}
	</script>
	<div style="padding: 85px 104px;">
		<span id="modifypwd">
			<div style="margin:15px 0 8px 75px;">　
				原密码：<input type="password" id="oldsecpwd" name="oldsecpwd" class="txt" size="34">
			</div>
			<div valid="password" style="margin-left:75px;margin-bottom:8px;" class="">　
				新密码：<input type="password" id="newsecpwd" name="newsecpwd" class="txt" size="34" oninput="onchangpwd()" onpaste="return false;">
			</div>
			<div style="margin-left:75px;">
				重输密码：<input type="password" id="newsecpwd2" name="newsecpwd2" class="txt" size="34" onpaste="return false;">
			</div>
		</span>
		<div class="rules_check_relative">
			<div class="rules_check_wrap">
				<span class="rules_check_arrow">
					<span class="arrow_l"></span>
					<span class="arrow_r"></span>
				</span>
				<h3>密码需满足以下要求：</h3>
				<ul>
					<li class="">
						<span class="icon_rules_check"></span>同时包含大写字母、小写字母和数字
					</li>
					<li class="">
						<span class="icon_rules_check"></span>密码长度为 6-18 个字符
					</li>
					<li class="">
						<span class="icon_rules_check"></span>不包含帐户信息与空格
					</li>
					<!-- <li class="">
						<span class="icon_rules_check"></span>不是常见密码
					</li> -->
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

外加放在IMG文件夹下的三张图片：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

效果图：
在这里插入图片描述

苦的人生遇见甜
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常用的javaScript正则表达式
weixin_30781107的博客
07-08 2019
1. 用户名正则 //用户名正则，4到16位（字母，数字，下划线，减号） var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uPattern.test("iFat3")); 复制代码2. 密码强度正则 //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符 var pPattern = /^....
正则表达式-几种常见的密码校验
热门推荐
T的专栏
12-31 1万+
首先说一下密码必须是6~18位之间的数字，正则表达式为"^[0-9]{6,18}$"，其中[0-9]表示必须是数字，{6,18}表示必须在6到18位之间，代码如下： 运行结果如下 接下来是密码中只能包含字母和数字的，正则表达式为："^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$"其中(?![0-9]+$)表示排除掉只有数字的组合，(?![a-zA-Z]+$)表示排除掉只有字母的组合，[0-9A-Za-z]表示必须有字母或数字，代码..
SpringSecurity系列学习(二):密码验证
在数字化道路无限探索
01-12 5100
版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。密码存储安全进化史这一节我们还是积累一些知识，迫不及待想编码的小伙伴再忍忍，打好基础才能避免一些坑，一步一脚印。 最开始的时候，密码是明文存储的。黑客只需要攻破你的数据库，就能拿到所有的账号与密码了 为了防止密码泄露，后来在存储密码的时候对密码进行了哈希加密，这种加密是不可逆的。这样黑客即使攻破数据库拿到了账号和密码保存的记录，也不能获得真正的密码，因为存储在数据库里的密码是经过哈希加密算法之后的数据。 黑客为了解决这种情况，使用了彩虹表：预先将
修改密码验证规则(element ui)
最新发布
m0_59365887的博客
05-17 639
首先用户账号密码已经存在了数据库中,并且已经运用了本地缓存将账号密码存在了本地缓存,所以在验证原始密码的时候,直接在本地缓存中取出密码并且和用户输入的原始密码进行验证,当密码一致的时候,让他通过,进而执行下一步的新设密码.同理,再次输入密码和新设的密码验证也是如此。validator是一个自定义验证器,validator函数里面包含三个参数('rule','value','callback')
密码校验密码正则校验，密码表单校验总结
您的博客
03-08 6044
js密码校验，密码正则校验，密码表单校验。
web单页密码验证通过
09-28
在Web开发领域，"web单页密码验证通过"是一个常见的安全功能，用于保护网页内容，确保只有知道特定密码的用户才能访问。这个功能通常应用于个人网站、私密页面或者需要预设权限才能查看的区域。在这个场景中，我们...
javascript密码验证
11-24
本文为大家分享了javascript密码验证的实现方法，欢迎大家阅读。   javascript密码验证代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>密码验证...
密码模块检测参考资料
01-31
密码模块安全技术要求（GM/T 0028-2014）国家标准文本，以及国家密码管理局发布的密码模块检测相关问题说明
易语言源码简单的登陆密码验证.7z
05-15
易语言是一种专为中国人设计的编程语言，它的目标是让编程...这个简单的登录密码验证源码是易语言初学者学习程序逻辑、用户交互和基本错误处理的好例子。通过分析和实践，可以提升编程技能，并为更复杂的项目打下基础。
确认密码校验规则
m0_60746035的博客
10-26 254
callback(new Error("两次输入密码不一致!message: '两次输入密码不一致',message: '请输入确认密码',
简单的密码登录验证
weixin_62599885的博客
08-12 489
能匹配原先设置好的用户名和密码进行验证。·输入错误次数过多限制登录验证。·输入密码时需要实时更新显示。·密码输入过多或输错可回删。
华为模拟器ENSP，telnet远程登陆命令配置，AAA验证和PASSWORD验证的区别
qq_53312231的博客
09-05 9166
华为模拟器ENSP，telnet远程登陆命令配置，AAA验证和PASSWORD验证的区别
密码验证，密码强度正则表达式
weixin_30764883的博客
01-08 516
当用户登录网站时，一般要求用户提供登录该网站的用户名称和密码。从某种意义上说，密码的复杂程度越高，用户的信息安全性越高。因此，很多网站在注册用户信息或修改用户密码时，往往会提供一个密码强度的说明，从而提醒用户使用高强度的密码。 目前来说，密码字符可以分为3种：数字、字母和特殊字符（即除数字、字母之外的字符）。用户密码包含上述3种字符种的种类越多，密码的安全性越高。用户密码只含其中一种的安全性是最...
登录 账号密码验证
qq_60839348的博客
03-02 327
登录 账号密码验证
密码校验1 (超级变态的密码）
weixin_43413824的博客
02-27 1364
密码规则： 1.密码长度不能小雨8个或少于32个字符 2.密码中至少包含2个字母，最少包含一个小写字母，一个大写字母，一个数字,一个特殊字符 3.密码中同一字符连续字符出现次数不能超过2，不能包含重复字符序列（重复次数为4，重复序列字符数为1） 4.密码不能包含用户名和用户名的倒序，不能包含用户手机号和用户邮箱账号 5.修改密码-新密码至少与旧密码差别3个字符且不能与近3个历史密码重复 代码 一：第一条和第二条可以一起校验 判断密码必须包含大小写字母数字特殊字符 /^(?=.*[a-z])(?=.*[A-Z
iw 密码验证 关联
10-25
iw密码验证关联是指通过使用iw命令来进行无线网络连接时需要输入密码进行身份验证。iw是Linux系统中用于配置和管理无线设备的命令，它提供了一种简单的方式来连接到无线网络。 在使用iw命令连接无线网络时，首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值