【WEB前端|H5实例】QQ修改密码页面模仿/js+css+html实现密码验证/必须包含数字字符字母两种组合/不含非法字符/密码强度验证/不能是最近使用过的密码/密码输入框实时监控

最新推荐文章于 2024-07-11 18:18:42 发布

EileenDeng

最新推荐文章于 2024-07-11 18:18:42 发布

阅读量2k

点赞数 3

文章标签： js css html javascript html5

本文链接：https://blog.csdn.net/dxy1128/article/details/105745610

版权

HTML5 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

最近小组做项目自己被分到做修改密码页面，参考了qq修改密码页面，发现验证功能很全。js新手入门，学着写了一个。代码如下。
功能：
1、新密码强度验证；
2、旧密码不为空；
3、新密码长度为8-16位，必须包含数字/字母/字符中的两种组合、不包含空格、不能含有非法字符、不能是近期使用过的密码；
4、再次输入密码不为空，判断两次输入是否一致；
5、以上四种功能都使用的onkeyup事件，只要输入框中的内容发生改变就激发函数。

//旧密码
function myFunctionforPast(){
	var n=document.getElementById("pwdpast").value;
	
	if(n==""){
		document.getElementById("pwdpast-text").innerHTML="不能为空";
		document.getElementById("pwdpast-text").className="pwdclass";
	}
	else{
		document.getElementById("pwdpast-text").innerHTML="";
		document.getElementById("pwdpast-text").className="";
	}
}
//再次输入密码
function myFunctionforTwice(){
	var m=document.getElementById("pwd2").value;
	var x=document.getElementById("pwd1").value; 
	if(m==""){
		document.getElementById("twicepwd").innerHTML="不能为空";
		document.getElementById("twicepwd").className="pwdclass";
	}
	else{
		document.getElementById("twicepwd").innerHTML=""
		document.getElementById("twicepwd").className="";
	}
	if(m!=x){
		document.getElementById("twicepwd").innerHTML="两次密码输入不一致";
		document.getElementById("twicepwd").className="pwdclass";
	}
}
//新密码
var oInput = document.getElementById('pwd1');
oInput.value = '';
var spans = document.getElementsByTagName('span');
var spans1=[];
var j=0;
for(var i=0;i<spans.length;i++)
{
	if(spans[i].className=="aaa"){
	spans1[j]=spans[i];
	j++;
	}
}
function checkpw1() {
	var x=document.getElementById("pwd1").value;
	var p=document.getElementById("pwdpast").value;
	spans1[0].className = spans1[1].className = spans1[2].className = "default";
							
	//var pwd = oInput.value;//x
	var result = 0;
	for(var i = 0, len = x.length; i < len; ++i){
		result |= charType(x.charCodeAt(i));
	}

	var level = 0;
	//对result进行四次循环，计算其level
	for(var i = 0; i <= 4; i++){
		if(result & 1){
			level ++;
		}
		//右移一位
		result = result >>> 1;
	}

	if(x.length >= 3){
		switch (level) {
			case 1:
				spans1[0].className = "weak";
				break;
			case 2:
				spans1[0].className = "medium";
				spans1[1].className = "medium";
				break;
			case 3:
			case 4:
				spans1[0].className = "strong";
				spans1[1].className = "strong";
				spans1[2].className = "strong";
				break;
		}
	}
	if(x== "") {
		document.getElementById("newpwd").innerHTML="不能为空";
		document.getElementById("newpwd").className="pwdclass";
		return false;
	}
	if(x!= "") {
		if(x.length < 8 ||x.length>16) {
			document.getElementById("newpwd").innerHTML="长度为8~16个字符";
			document.getElementById("newpwd").className="pwdclass";
			return false;
		}
		else{
			document.getElementById("newpwd").innerHTML="";
			document.getElementById("newpwd").className="";
		}
		if(x == p) {
			document.getElementById("newpwd").innerHTML="不能是近期使用过的密码，请重新输入";
						document.getElementById("newpwd").className="pwdclass2";
			return false;
		}
		// ^\S
		re = /((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))(?!^.*[\u4E00-\u9FA5].*$)^\S{8,16}$/;
		if(!re.test(x)) {
			document.getElementById("newpwd").innerHTML="密码必须包含数字/字母/字符两种组合,且不能含有空格";
			document.getElementById("newpwd").className="pwdclass2";
			return false;
		}
		re = /[@#\$%\^&\*]+/g;
		if(re.test(x)) {
			document.getElementById("newpwd").innerHTML="不能有非法字符"
			document.getElementById("newpwd").className="pwdclass";
			return false;
		}
	} else {
		document.getElementById("newpwd").innerHTML="";
		return false;
	}
	return true;
}
function charType(num){
	if(num >= 48 && num <= 57){
		return 1;
	}
	if (num >= 97 && num <= 122) {
		return 2;
	}
	if (num >= 65 && num <= 90) {
		return 4;
	}
	return 8;
}

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
     <!-- Title -->
    <title>修改密码</title>
    <!-- Core Stylesheet -->
   <link rel="stylesheet" href="css/修改密码界面.css">
	
</head>
   
<body>
  
			    
					<div id="passwd-change">	
						<ul>
							<li>
								<span class="span-left">
									请输入原密码：
								</span>
								 <input type="password" id="pwdpast" name="pwdpast" class="input" οnkeyup="myFunctionforPast()">
								 <span id="pwdpast-text">
									
								</span>
							</li>
							<li>
								<span class="span-left">
									请输入新密码：
								</span>
								 <input type="password" id="pwd1" name="pwd1" class="input"/οnkeyup="checkpw1()" value autocomplete="off">
								 <span id="newpwd"></span>
								
							</li>
							<li id="strength">
								<span class="span-left">密码强度：</span>
								<span class="aaa">弱</span>
								<span class="aaa">中</span>
								<span class="aaa">强</span>
							</li>
							<li>
								<span class="span-left">
									请再次输入新密码：
								</span>
								<input type="password" id="pwd2" name="pwd2"/ class="input"value autocomplete="off" οnkeyup="myFunctionforTwice()"/>
								<span id="twicepwd">
									
								</span>
							</li>
							<li>
								<button type="button">提交修改</button>
							</li>
           </ul>
						
					</div>
							
	
							
						
	<!--本页的js-->
	<script src="js/密码测试.js">
		
	</script>
</body>

</html>

/***********************修改密码页面************************************/
*{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
}
#passwd-change ul{
	border: none;
	margin-left:20px;
	height: 630px;
	width: 800px;
	margin-left: 50px;
	padding-top: 50px;
	/* padding-left: 50px; */
	/* background-color: #007BFF */
}
#passwd-change ul li{
	border: none;
	height: 50px;
	width: 600px;
}
#passwd-change ul li button{
	display: block;
	margin-left: 110px;
	border: none;
	border-radius: 10px;
	height: 30px;
	width: 100px;
	background-color:#81c234 ;
	color: #FFFFFF;
	outline: none;
}
#passwd-change ul li span{
	/* width: 160px; */
	height: 30px;
	/* font-size: 16px; */
	/* font-weight: bold; */
	/* line-height: 30px; */
		/* background: red; */
	display: block;
	float: left;
	/* padding-left: 15px; */
}
#passwd-change ul li .span-left{
	width: 160px;
	font-size: 16px;
	line-height: 30px;
}
#passwd-change ul li input{
	width: 220px;
	height: 30px;
	font-size: 16px;
	/* border-radius: 10px; */
	/* font-weight: bold; */
	/* background: yellow; */
	margin-left: 2px;
	display: block;
	float: left;
}
#passwdchange{
background-color: #81c234;
color: #FFFFFF;
}
/* #strength */.default {
	background: #eeeeee;
	line-height: 30px;
	display: inline-block;
	width: 70px;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	text-align: center;
	margin: 4px 2px;
}
#strength .weak {
	background: #FF0000;
	display: inline-block;
	font-size: 16px;
	width: 70px;
	line-height: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin: 4px 2px;
	}
#strength .medium {
	background: #FF9900;
	display: inline-block;
	font-size: 16px;
	width: 70px;
	line-height: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin: 4px 2px;
	}
#strength .strong {
	background: #81c234;
	display: inline-block;
	width: 70px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 16px;
	line-height: 30px;
	margin: 4px 2px;
	}
#strength .aaa{
	display: inline-block;
	width: 70px;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	background: #ddd;
	line-height: 30px;
	text-align: center;
	margin: 4px 2px;}
.pwdclass{
	width: 200px;
	height: 30px;
	font-size: 14px;
	line-height: 30px;
	border: 1px solid rgba(129,194,52,0.9);
	background-color: rgba(129,194,52,0.3);
	color:rgb(129,194,52) ;
	text-align: center;
	padding-left: 0;
	margin-left: 10px;
}
.pwdclass2{
	width: 200px;
	height: 30px;
	font-size: 12px;
	line-height: 15px;
	border: 1px solid rgba(129,194,52,0.9);
	background-color: rgba(129,194,52,0.3);
	color:rgb(129,194,52) ;
	text-align: center;
	padding-left: 0;
	margin-left: 10px;
}

预览效果
在这里插入图片描述

EileenDeng

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
【WEB前端|H5实例】QQ修改密码页面模仿/js+css+html实现密码验证/必须包含数字字符字母两种组合/不含非法字符/密码强度验证/不能是最近使用过的密码/密码输入框实时监控

最近小组做项目自己被分到做修改密码页面，参考了qq修改密码页面，发现验证功能很全。js新手入门，学着写了一个。代码如下。js//旧密码function myFunctionforPast(){ var n=document.getElementById("pwdpast").value; if(n==""){ document.getElementById("pwdpast-...
复制链接

扫一扫

专栏目录