为什么密码强度那块回退删除的时候颜色不会跟着变化
来源：2-25 项目作业
慕村8326374
2021-02-14 20:58:34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.post{
width: 700px;
height: 300px;
border: 3px solid orange;
border-radius: 15px;
position: relative;
box-sizing: border-box;
cursor: pointer;
margin: 200px auto;
}
.post form{
padding-top: 30px;
padding-left: 50px;
color: orange;
}
.post form table tr{
height: 60px;
}
.post li{
list-style: none;
width: 70px;
height: 20px;
border: 1px solid none;
float: left;
margin: 0px 5px;
border-radius: 15px;
background-color: rgba(128, 128, 128, 0.2);
}
.post form table strong{
color: orange;
padding-right:10px;
}
.post form .hint{
padding-left: 15px;
color: plum;
}
.post form table input{
border: 1px solid orange;
border-radius: 15px;
outline: none;
height: 30px;
}
.post form button{
width: 100px;
height: 30px;
border-radius: 15px;
border: 1px solid orange;
background-color: plum;
outline: none;
cursor: pointer;
}
.confirm{
width: 300px;
display: inline-block;
}
</style>
</head>
<body>
<div class="post">
<form >
<table>
<tr>
<td class="uerName"> <strong>*</strong> 用户名：</td>
<td>
<input type="text">
</td>
<td>
<span class="hint" >6-30位字母、数字或_， 以字母开头</span>
</td>
</tr>
<tr>
<td class="cipher"><strong>*</strong>登录密码：</td>
<td>
<input type="password" placeholder="6-20位字母或数字">
</td>
<td>
<ul class="intensity">
<li ></li>
<li></li>
<li></li>
</ul>
</td>
</tr>
<tr>
<td ><strong>*</strong>确认密码：</td>
<td>
<input type="password">
</td>
<td >
<span class="confirm"></span>
</td>
</tr>
</table>
<button class="submit" >注册</button>
</form>
</div>
<script>
// 验证用户名
var inputUserName=document.querySelectorAll('input')[0];
var ohint=document.querySelector('.hint');
var testingname=false;
inputUserName.onblur=function(){
var regExp = /^[a-zA-Z]\w{5,29}$/;
if(regExp.test(inputUserName.value)){
ohint.innerText='用户名输入正确';
ohint.style.color='green';
testingname=true;
}else{
ohint.innerText='6-30位字母、数字或_， 以字母开头';
ohint.style.color='red'
testingname=false;
}
};
// 密码输入
var inputPassWord=document.querySelectorAll('input')[1];
var testingpassword=false;
var olist=document.querySelectorAll('li');
inputPassWord.onkeyup=function(){
if(/^[a-zA-Z0-9]+$/.test(inputPassWord.value)){
testingpassword=true;
if(/^[a-z]+$/.test(inputPassWord.value) || /^[A-Z]+$/.test(inputPassWord.value) || /^[0-9]+$/.test(inputPassWord.value)){
olist[0].style.backgroundColor='red';
olist[1].style.borderColor='rgb(209, 207, 207)';
olist[2].style.borderColor='rgb(209, 207, 207)';
}else if( /^[a-zA-Z]+$/.test(inputPassWord.value) || /^[a-z0-9]+$/.test(inputPassWord.value) || /^[A-Z0-9]+$/.test(inputPassWord.value)){
olist[0].style.backgroundColor='red';
olist[1].style.backgroundColor='orange';
olist[2].style.borderColor='rgb(209, 207, 207)';
}else {
olist[0].style.backgroundColor='red';
olist[1].style.backgroundColor='orange';
olist[2].style.backgroundColor='green';
}
}else{
testingpassword=false;
olist[0].style.backgroundColor='rgb(209, 207, 207)';
olist[1].style.backgroundColor='rgb(209, 207, 207)';
olist[2].style.backgroundColor='rgb(209, 207, 207)';
}
}
// 再次验证密码
var oinputPassWord=document.querySelectorAll('input')[2];
var confirm=document.querySelector('.confirm');
var testingwd=false;
oinputPassWord.onblur=function(){
if(!oinputPassWord.value){
confirm.innerText='输入框不能为空';
confirm.style.color='red';
testingwd=false;
}else if(oinputPassWord.value!=inputPassWord.value){
confirm.innerText='密码输入不一致';
confirm.style.color='red';
testingwd=false;
}else if(oinputPassWord.value==inputPassWord.value){
confirm.innerText='输入一致';
confirm.style.color='red';
testingwd=true;
}
}
// 注册按钮
var submit=document.querySelector('.submit');
submit.onclick=function(){
if(testingname&&testingpassword&&testingwd ){
alert('填写正确');
}else{
alert('请填写正确信息')
}
}
</script>
</body>
</html>
1回答
-
好帮手慕久久
2021-02-18
同学你好，以第三个强度按钮为例给同学进行讲解：
当输入一个“强”密码时，第三个按钮既有边框颜色样式，又有背景色样式，如下：
当删除密码，将密码由“强”变成“中等”时，第三个按钮的边框颜色会被改变，但是此时按钮的背景色并没有被改变：
由于背景色是后添加的，它处于边框颜色后面：
所以按钮的样色会受背景颜色控制。由于背景色没变，因此按钮样式没改变。
建议统一都设置背景色改变，如下：
祝学习愉快！
0
相似问题