纯HTML+CSS+Jquery实现的修改密码框（密码强度动态验证，再次确认验证，密码长度动态显示）均实现，可直接运行使用

最新推荐文章于 2022-06-10 17:47:44 发布
最新推荐文章于 2022-06-10 17:47:44 发布
阅读量2.9k 收藏 11
点赞数 1
分类专栏： 前端总结 文章标签： html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pibuliao8626/article/details/106120938
版权

实际效果：基本的密码强度验证，再次确认验证，密码长度都已经实现`在这里插入代码片

<head>

	<meta charset="UTF-8">
	<title>纯HTML+CSS+Jquery实现的修改密码框</title>

	<style type="text/css">
		#modal-overlay {
			visibility: hidden;
			position: absolute;
			/* 使用绝对定位或固定定位  */
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			text-align: center;
			z-index: 1000;
			background-color: #8393a9;
			opacity: 0.9;
			/* 背景半透明 */
		}
		/* 模态框样式 */
		
		.modal-data {
			margin: 3rem auto;
			background-color: #000;
			border: 1px solid #000;
			padding: 0.3rem;
			text-align: center;
			border-radius: 0.5rem;
			box-shadow: 0 0 15px #f9f9f8;
			width: 36rem;
			height: 18rem;
		}
		
		.modal-data .sapnctyle0 {
			text-align: left;
			font-size: 0.4rem;
			display: inline-block;
			width: 90%;
			color: white;
		}
		
		.modal-data .sapnctyle1 {
			text-align: left;
			font-size: 0.4rem;
			display: inline-block;
			width: 9%;
		}
		
		.modal-data .classstyle0 {
			color: red;
			font-size: 0.3rem;
			text-align: left;
			margin-left: 0.24rem;
		}
		
		.modal-data .bottom {
			margin-top: 0.1rem;
		}
		
		.modal-data .trClass {
			width: 100%;
			padding: 0.2rem 0.5rem;
		}
		
		.modal-data .trClass .tdLabel {
			width: 9%;
			display: inline-block;
			text-align: right;
			font-size: 0.4rem;
			color: white;

		}
		
		.modal-data .trClass .tdInput {
			width: 70%;
			display: inline;
		}
		
		.modal-data .trClass .tdInput .divStyle {
			margin-left: 3.3rem;
		}
		
		.modal-data .trClass .tdInput .inputbox {
			width: 27rem;
            height: 1.7rem;
			font-size: 0.25rem;
			color: #000
		}
		
		.inputbox.change::-webkit-input-placeholder {
			color: red;
		}
		
		.modal-data .trClass .tdCancel {
			width: 20%;
			display: inline;
		}
		
		.modal-data .trClass .tdChoose {
			width: 20%;
			display: inline-block;
			margin-left: 1rem;
		}
		
		.bottomstyle {
			height: 2.65rem;
            width: 4.2rem;
			color: #3b4555;
			font-size: 0.4rem;
		}
		
		.lableStyle {
			display: inline-block;
			width: 9rem;
			background-color: #adb9cb;
			margin-top: 0.1rem;
			border-radius: 2rem;
			color: #f9f9f8;
		}
		
		.lableCountNumStyle {
			display: inline-block;
			width: 1.65rem;
			background-color: #adb9cb;
			border-radius: 1rem;
			text-align: center;
			color: #f9f9f8;
		}
	</style>
</head>

<body>
    <div><span onclick="overlay()">显示修改密码浮窗</sapn></div>
	<div style="width: 100%; height: 100%;">
		<div id="modal-overlay">
			<div class="modal-data">
				<span class="sapnctyle0">修改密码</span>
				<span class="sapnctyle1"></span>
				<p class="classstyle0">新密码长度必须是8位或8位以上，包含英文大、小写字母及阿拉伯数字， 且不能与原密码相同或用户名相同
				</p>
				<div class="bottom">
					<div class="trClass">
						<div class="tdLabel">原密码</div>
						<div class="tdInput">
							<input class="inputbox" id="initpw" type="password" οnpaste="return false;" οndragenter="return false;" οncοntextmen="return false"></input>
						</div>
					</div>
					<div class="trClass" style="padding-right: 0rem;">
						<div class="tdLabel" style="width: 13.5%;">新密码</div>
						<div class="tdInput">
							<input id="pw" class="inputbox" type="password" placeholder="" onKeyUp="checkStrong(value)"></input><label class="lableCountNumStyle">0</label>
							<div class="divStyle"><label class="lableStyle" id="jyxyzm">小写字母</label> <label class="lableStyle" id="jysz">数字</label> <label class="lableStyle" id="jydyzm">大写字母</label></div>
						</div>
					</div>

					<div class="trClass">
						<div class="tdLabel">确认密码</div>
						<div class="tdInput"><input id="repw" class="inputbox" type="password" placeholder="" onKeyUp=""></input>
						</div>
					</div>

					<div class="trClass">
						<div class="tdChoose">
							<button class="bottomstyle" onclick="submit()">确定</button>
						</div>
						<div class="tdCancel">
							<button class="bottomstyle" onclick="overlay()">取消</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	//html +css 模态框展示关闭事件
	function overlay() {
		var e1 = document.getElementById('modal-overlay');
		e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
		$(".inputbox").val("").removeClass('change').attr("placeholder", ""); //清空输入框//清除自定义placeholde样式//清空placeholde文本
		/*$("#repw").attr("placeholder", "");*/
		$(".lableCountNumStyle").html('0');
		$('#jysz,#jyxyzm,#jydyzm,.lableCountNumStyle').removeAttr("style");
	}
	/*修改密码提交*/
	function submit() {
		if(checkStrong($("#pw").val()) && checkpassword() && ($("#initpw").val().length > 0)) {
			//发送请求       
			alert("请求成功");
		} else {
			if($("#initpw").val().length <= 0) {
				$("#initpw").val("");
				$("#initpw").addClass('inputbox change');
				$("#initpw").attr("placeholder", "原密码不能为空");
			}
			if(!checkpassword()) {
				$("#repw").val("");
				$("#repw").addClass('inputbox change');
				$("#repw").attr("placeholder", "两次密码输入不一致");
			}
			if(!checkStrong($("#pw").val())) {
				$("#pw").val("");
				$("#pw").addClass('inputbox change');
				$("#pw").attr("placeholder", "密码强度不够");
				$(".lableCountNumStyle").html('0');
				$('#jysz,#jyxyzm,#jydyzm,.lableCountNumStyle').removeAttr("style");
			}
		}
	}
	/*检测密码强度*/
	function checkStrong(value) {
		var strength = 0;
		/*value.match(/[\da-zA-Z]+/)*/
		if(value.length > 0) {
			/*匹配数字*/
			if(value.match(/\d+/)) {
				strength++;
				$("#jysz").css("background-color", "#339ed1");
			} else {
				$("#jysz").css("background-color", "#adb9cb");
			}
			/*匹配小写字母*/
			if(value.match(/[a-z]+/)) {
				strength++;
				$("#jyxyzm").css("background-color", "#339ed1");
			} else {
				$("#jyxyzm").css("background-color", "#adb9cb");
			}
			/*匹配大写字母*/
			if(value.match(/[A-Z]+/)) {
				strength++;
				$("#jydyzm").css("background-color", "#339ed1");
			} else {
				$("#jydyzm").css("background-color", "#adb9cb");
			}
			/*匹配特殊字符*/
			if(value.match(/[!@*$-_()+=&￥]+/)) {
				strength++;
			}
			$(".lableCountNumStyle").html(value.length);
			if(value.length > 7) {
				$(".lableCountNumStyle").css('background-color', '#339ed1')
			} else {
				$(".lableCountNumStyle").css('background-color', '#adb9cb')
			}
		} else {
			$(".lableCountNumStyle").html('0');
			$('#jysz,#jyxyzm,#jydyzm,.lableCountNumStyle').removeAttr("style");
		}
		if(strength >= 3) {
			return true;
		}
		return false;
	};
	/*检测密码是否一致*/
	function checkpassword() {
		var password = $("#pw").val();
		var repassword = $("#repw").val();

		if(password == repassword) {
			return true;
		} else {
			return false;
		}
	};
</script>
`
井底的青蛙
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页实现修改密码
njfangju的博客
11-09 7321
在轻量化平台上，目前已有登录界面login.html、服务配置界面conf.html、服务状态监控界面transList.html，现在要求**用户在登录之后可以*修改密码*。** #需求 1、口令长度至少6个字符； 2、口令必须包含如下至少两种字符的组合: －至少一个小写字母； －至少一个大写字母； －至少一个数字； －至少一个特殊字符：`~!@#$%^&*()-_=...
jquery.validate表单验证密码完整例子(带密码强度显示）
10-12
在本文中，我们将深入探讨`jQuery Validate`插件的一个实用示例，该示例涉及到密码验证，同时还提供了密码强度的实时显示。`jQuery Validate`是一个非常流行且功能强大的JavaScript库，用于验证HTML表单中的输入数据...
html页面中写密码修改,修改登录密码.html
weixin_39674414的博客
05-31 1936
bootstrap.navbar{background: #0c82bc;}ul,li{padding-left: 10px;margin-top: 9px;list-style: none;}.input-group{margin-top: 8px;}.glyphicon {position: relative;top: 1px;display: inline-block;font-family...
php ajax密码修改,jQuery+ajax实现修改密码验证功能实例详解
weixin_39992665的博客
03-20 178
废话不多说了，直接给大家贴代码了，具体代码如下所示：//获取url中的参数$(function(){var userName = window.location.href;var aa = userName.indexOf("=");console.log(userName);if (aa == -1)return "";userName=userName.substring(aa+1);//给h...
html用户密码修改界面,16.设计和实现用户中心、修改密码功能
weixin_39867708的博客
06-03 3038
现在我们来设计一个用户中心的页面，显示用户相关的信息，由于我们的Q&A demo比较简单，所以显示的内容也不用太多，我们来显示用户的头像、注册时间、发表的问题数和评论数，设计一个user.html，界面如下：用户的头像或其他信息都可以通过上下文管理器返回的login_user去获取，发布问答和评论数直接在模板里使用length过滤器，之前的文章都有类似的部分。这个页面通过点击导航条的用户进...
简单且实用的密码修改模态框
weixin_44542089的博客
07-17 2952
修改密码相信大家都不会陌生，几乎每个系统都缺不了修改密码，这是增强用户体验性的一种基本要求，一个网站中，若是没有修改密码这一功能的话，绝对活不长久，因为每位用户的都会有账号被盗取，信息被泄露的风险，若不能修改密码，那么对用户的利益便造成了巨大的损失，谁会用这样的网站呢? 所以说，密码的修改功能对于一个完整系统来说是必不可少的，具有重要性的。因此，这次便分享给大家一个以Bootstrap为基础来搭建...
html怎样做修改密码的网页,HTML登录界面 html登录界面设置账号密码
weixin_39976413的博客
06-03 3022
用html代码编写一个简单的登陆界面登录 jsp作业 登录 登录到jsp作业 Email 密码 记住密码 登录 注册html网页设计：一个简单的登录界面代码。javascript html 设计一个登录界面注册页面代码： 注册 去登录 var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024); localDB....
jQuery实现以色彩显示判断密码强度的可视化表单密码框效果.zip
11-08
// 实现密码强度检查逻辑，例如： var score = 0; if (password.length >= 8) score += 1; if (/[A-Z]/.test(password)) score += 1; if (/[a-z]/.test(password)) score += 1; if (/\d/.test(password)) ...
jQuery密码强度验证代码.zip
最新发布
10-14
标题中的“jQuery密码强度验证代码.zip”表明这是一个包含使用jQuery实现的密码强度验证功能的代码资源。这个资源可能是一个完整的JavaScript库或者一个简单的脚本，用于网页上的用户输入验证，特别是针对密码安全性...
jQuery输入密码强度验证代码
06-10
在这个场景中，我们利用`jQuery`来实现一个密码强度验证功能，帮助用户创建更安全的密码。 标题中的“jQuery输入密码强度验证代码”指的是利用`jQuery`来编写一段脚本，实时监测用户在密码输入框中输入的内容，并...
css+html登录界面
07-21
纯css+html设计的登录界面，简约设计，简化一切冗余的部分
html5+jquery非常炫丽的登录界面，包含登录、注册、修改密码等效果
03-07
html5+jquery非常炫丽的登录界面，包含登录、注册、修改密码等效果
登录界面、找回密码界面、修改密码界面的源代码
09-05
登录界面、找回密码界面、修改密码界面的源代码。 在制作过程中，有使用CSS、JS、Jquery。其中还有cookie、base64的js插件。 每一次刷新登录页面都可以自动刷新验证码。 提供的源代码仅供参考，如有不足，请多多指教，谢谢！
精美html5登陆界面源码，开源源码，可随意修改，动态界面，很漂亮哦~~~
03-13
精美html5登陆界面源码，开源源码，可随意修改，动态界面，很漂亮哦~~~
jQuery实用密码强度检测
10-20
根据正则表达式的匹配结果，我们可以动态地添加或移除CSS类，从而改变显示的密码强度指示器。例如，如果密码强度为强，我们将添加 `pw-strong` 类到 `#level` 元素。 这个简单的密码强度检测工具可以帮助用户创建更...
html web修改密码模板,实现域内用户能够通过网页web方式修改与用户密码
weixin_36284062的博客
06-03 531
提交页面, inputinfo.asp: Change Password This page is meant for our staff to change the domain user password. The new password must be not less than 8 characters. Username: Old Password:...
HTML密码正则表达式结构,JavaScript动态检测密码强度原理及实现方法详解
weixin_36444661的博客
06-03 325
本文实例讲述了JavaScript动态检测密码强度原理及实现方法。分享给大家供大家参考，具体如下：在注册账户，设置密码时，会出现密码强度动态检测，网上看了一些帖子，大多只写了具体的实现过程，而没有对原理的分析过程。下面着重讲一下其原理。原理分析通常实现密码强度动态判断有两种方案实现：正则。但其效率低一点，难度也大一些。字符串，函数和运算符。这里用第二种方案，但是如何判断一个密码串是强还是弱呢？一般...
一个重置密码html示例
林
06-10 1049
<style type="text/css"> .formblock { display: inline-block; padding: 0px 6px; min-width: 300px; border: solid 1px #000; background-color: #ccc; } .formblock input {margin-bottom: 10px; } </style&
html页面中写密码修改,html输入密码进入页面 html做一个静态的输入密码跳转页...
weixin_29643223的博客
05-31 5390
如何对一个HTML页面设置密码输入?我有一个页面,不想给其他人看到,只想给我朋友看. 加个什么代码能让我朋新建index.html页面。写入HTML文件，任何一个网页式的文件，必须要有HTML文件的元素，才算合格的网页。用记事本打开index.html添加JS脚本，在之间添加以下JS脚本代码。添加网页内容，添加网页内容可以验证密码输入正确后进入网页html做一个静态的输入密码跳转页急需CSS布局H...
五子棋网站设计与实现：HTML+CSS, Bootstrap与JavaScript技术
"这篇毕业设计主要探讨了五子棋游戏的网页实现，使用HTML+CSS，Bootstrap和JQuery等技术。设计目标是创建一个响应式的五子棋网站，支持用户登录和选择游戏难度，兼容多种浏览器。设计内容包括游戏的需求分析、系统...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值